Browse Json

[byron.hopp]

I am using Microsoft Sql 2016 calling this query:
select keyno,name,abbr from hospital for json auto

It returns JSON which I use HB_JsonDecode(cJson,@oJson)

oJson is an array of hashes.

Can I browse this, if so how do I set it up.

Thanks,

[byron.hopp]

To better explain I can do this:

for each h in oJson
Msginfo( h["keyno"] )
Msginfo( h["name"] )
Msginfo( h["abbr"] )
next

It goes through all of the 7 records in the table.

[Otto]

Hello,
In my mod harbour programs I use for testing:

logline only saves the string to the disk. In FIVEWIN you can use msginfo().

Code: Select all  Expand view

   
hb_jsondecode( AP_Body(), @hPost )
   
    logline( "AP_Body() Type", ValType ( hPost ) )
   
    logline('hb_HKeys start')
   
    aParameters :=  hb_HKeys( hPost )

    logline( str(len(aParameters ) )  )
    logline( "hb_HKeys", ValToChar ( aParameters ) )
   
    FOR nIdx := 1 to len( aParameters )
        logline( aParameters[ nIdx ],  ValToChar ( hb_HGetDef( hPost, aParameters[ nIdx ], "---" ) )   )
    next
 

Best regards,
Otto

[byron.hopp]

Yes thank you, but how do I set up the TCBrowse to browse it. I have been able to see the data in the Json, it is basically an array where each element contains a hash which has the three fields returned from the "for json auto" call. But can I pass the object created from the hb_JsonDecode function and display it in TCBrowse. I played around with setting oBrw:cAlias := "ARRAY" but get no data. Not sure how to set the bGoTop, bGoBottom, bSkip, bLogicLen blocks. For now I am creating a dynamic recordset from the json object, but I feel like it is an extra step. Thanks, again...

[anserkk]

Try xBrowser HashTree( oJson ) to understand the structure of your JSON

Code: Select all  Expand view

Local hItems,aData
aData:={}
For Each hItems IN oJson

   aAdd(aData, HashToArray( hItems ) )
Next

xBrowser aData

//-------------------------------------
Function HashToArray( hData )

   Local aData := {}, xItem

   For each xItem in hData
      if ValType( xItem ) $ "HA"
         AAdd( aData, HashToArray( xItem ) )
      else
         AAdd( aData, xItem )
      endif
   Next      

Return aData

Now you have your JSON data converted to an array and you can use it as per your requirements.

Regards
Anser

[nageswaragunupudi]

We can view a structured Json using either FW_MemoEdit() or XBrowse this way.
This apply to any complex Json and Json arrays.

Code: Select all  Expand view

#include "fivewin.ch"

function Main()

   local cJson, hHash, oTree
   local cTitle := "JSON VIEW"

TEXT INTO cJson
{"numRows":1182,"numPages":591,"pageNumber":0,"startIndex":0,"endIndex":2,"totalValue":"10819097.2000","totalPurchaseValue":"0.0000",
"totalMargin":"10819097.2000","totalQuantity":306361,"totalPhysicalQuantity":54,"totalMinimumQuantity":0,"lowestPrice":"0.0000",
"highestPrice":"365.0300","data":[{"uprid":"543","productId":543,"stockId":-1,"referenceId":0,"isBundle":0,"bundledProducts":[],
"status":1,"quantity":"400","maximumQuantity":null,"ean":"","sku":"","model":"BCWU03W","hsCode":null,
"name":"#Hoodie","price":"13.4280","taxClassId":"3","taxRate":"21.0000","isPhysical":"1","isDigital":"0","isQuotation":"1","url":"promotiekleding\/sweaters\/sweaters-met-kap\/hoodie","urlAbs":"https:\/\/www.maveco-webshop.be\/promotiekleding\/sweaters\/sweaters-met-kap\/hoodie","attributesString":"","backOrder":0,"onHome":0,"layover":1,"configurationAllowCheckout":1,"configurationStockCheck":0,"attributes":[],"description":"Uniseks <br> French Terry <br> Lange mouwen <br> Hooded <br> Regular fit <br> Voorgekrompen ringgesponnen katoen <br> Zijnaden <br> Gemakkelijke branding: geen B&C label <br> Binnenkant Single Jersey halfmoon in rug <br> Ongeborstelde stof <br> Sterke stof <br> Zacht handgevoel <br> Glad en gelijkmatig oppervlak <br> In zijnaad: Zacht satijnlabel","addonInstagramEnabled":"0","addonInstagram":"0","addonOcsEnabled":"0","dateAdded":"0000-00-00 00:00:00","lastModified":"2020-09-11 16:41:37","descriptions":{"description":"Uniseks <br> French Terry <br> Lange mouwen <br> Hooded <br> Regular fit <br> Voorgekrompen ringgesponnen katoen <br> Zijnaden <br> Gemakkelijke branding: geen B&C label <br> Binnenkant Single Jersey halfmoon in rug <br> Ongeborstelde stof <br> Sterke stof <br> Zacht handgevoel <br> Glad en gelijkmatig oppervlak <br> In zijnaad: Zacht satijnlabel","extra":"","intro":" 280 g\/m"},"images":["bcwu03w.jpg","bcwu03w_black-pure.jpg","bcwu03w_candy-pink.jpg","bcwu03w_desert.jpg","bcwu03w_elephant-grey.jpg","bcwu03w_forest-green.jpg","bcwu03w_grey-fog.jpg","bcwu03w_hawaiian-blue.jpg","bcwu03w_heather-asphalt.jpg","bcwu03w_heather-dark-green.jpg","bcwu03w_heather-grey.jpg","bcwu03w_heather-mid-grey.jpg"],"image_alt":["","","","","","","","","","","",""],"discounts":{"name":"0","groupDiscount":"0.00","groupDiscountCategory":"0.00","groupDiscountProduct":"0.00"},"category":{"id":"888963","name":"Sweaters met kap","categoryIds":"888963","cPath":"73_888904_888963"},"quantities":{"quantity":"400","physicalQuantity":"0","minimumQuantity":"0","maximumQuantity":null,"externalQuantity":"0","quantityStep":"1","trackQuantity":"1"},"prices":{"basePrice":"14.9200","normalPrice":"14.9200","price":"13.4280","specialPrice":"13.4280","purchasePrice":"0.0000"},"manufacturer":{"id":46,"name":"B&amp;C","image":"bc.jpg-preview72.jpg"},"dimensions":{"type":"0","width":0,"height":0,"area":0,"weight":0},"reviews":{"count":0,"avg":0},"resources":[],"addons":{"multicatalog":{"enabled":false},"layover":{"enabled":true}}},{"uprid":"561","productId":561,"stockId":-1,"referenceId":0,"isBundle":0,"bundledProducts":[],"status":1,"quantity":"400","maximumQuantity":null,"ean":"","sku":"","model":"BCWW04W","hsCode":null,"name":"#Hoodie Sweat \/Women","price":"13.4280","taxClassId":"3","taxRate":"21.0000","isPhysical":"1","isDigital":"0","isQuotation":"1","url":"promotiekleding\/dames\/dames-sweaters--fleece\/hoodie-sweat-women","urlAbs":"https:\/\/www.maveco-webshop.be\/promotiekleding\/dames\/dames-sweaters--fleece\/hoodie-sweat-women","attributesString":"","backOrder":0,"onHome":0,"layover":1,"configurationAllowCheckout":1,"configurationStockCheck":0,"attributes":[],"description":"French Terry <br> Lange mouwen <br> Hooded <br> Regular fit <br> Voorgekrompen ringgesponnen katoen <br> Zijnaden <br> Gemakkelijke branding: geen B&C label <br> Binnenkant Single Jersey halfmoon in rug <br> Ongeborstelde stof <br> Sterke stof <br> Zacht handgevoel <br> Glad en gelijkmatig oppervlak <br> In zijnaad: Zacht satijnlabel","addonInstagramEnabled":"0","addonInstagram":"0","addonOcsEnabled":"0","dateAdded":"2020-09-11 16:41:47","lastModified":"2020-09-11 16:41:47","descriptions":{"description":"French Terry <br> Lange mouwen <br> Hooded <br> Regular fit <br> Voorgekrompen ringgesponnen katoen <br> Zijnaden <br> Gemakkelijke branding: geen B&C label <br> Binnenkant Single Jersey halfmoon in rug <br> Ongeborstelde stof <br> Sterke stof <br> Zacht handgevoel <br> Glad en gelijkmatig oppervlak <br> In zijnaad: Zacht satijnlabel","extra":"","intro":" 280 g\/m"},"images":["bcww04w.jpg","bcww04w_black-pure.jpg","bcww04w_candy-pink.jpg","bcww04w_desert.jpg","bcww04w_elephant-grey.jpg","bcww04w_forest-green.jpg","bcww04w_grey-fog.jpg","bcww04w_hawaiian-blue.jpg","bcww04w_heather-asphalt.jpg","bcww04w_heather-dark-green.jpg","bcww04w_heather-grey.jpg","bcww04w_heather-mid-grey.jpg"],"image_alt":["","","","","","","","","","","",""],"discounts":{"name":"0","groupDiscount":"0.00","groupDiscountCategory":"0.00","groupDiscountProduct":"0.00"},"category":{"id":"888955","name":"Dames Sweaters & Fleece","categoryIds":"888955","cPath":"73_888940_888955"},"quantities":{"quantity":"400","physicalQuantity":"0","minimumQuantity":"0","maximumQuantity":null,"externalQuantity":"0","quantityStep":"1","trackQuantity":"1"},"prices":{"basePrice":"14.9200","normalPrice":"14.9200","price":"13.4280","specialPrice":"13.4280","purchasePrice":"0.0000"},"manufacturer":{"id":46,"name":"B&amp;C","image":"bc.jpg-preview72.jpg"},"dimensions":{"type":"0","width":0,"height":0,"area":0,"weight":0},"reviews":{"count":0,"avg":0},"resources":[],"addons":{"multicatalog":{"enabled":false},"layover":{"enabled":true}}}]}
ENDTEXT

   // using FW_MEMOEDIT

#if FW_VersionNo >= 23040
   JsonView( cJson, cTitle ) // cJson can be text or file name
#else
   FW_MemoEdit( hb_JsonEncode( hb_JsonDecode( cJson ), .t. ), cTitle )
#endif

   // Using XBrowse
   XBROWSER HashTree( hb_JsonDecode( cJson ), 0 ) TITLE "JSON BROWSE" ;
      SETUP ( ;
      oBrw:cHeaders := { "ITEM", "VALUE" }, ;
      oBrw:aCols[ 2 ]:bStrData := { |x,o| If( o:oBrw:oTreeItem:lOpened,"",o:Value ) } )


return nil

// This is a function from XBrowse.
// Latest verion is included here for the benefit of older FWH versions
//
static function HashTree( hHash, nLevel, cParent )

   local oTree
   local n, uVal, oItem

   TREE oTree

   if ValType( hHash ) == "H"
      for n := 1 to Len( hHash )
         TREEITEM oItem PROMPT hb_hKeyAt( hHash, n ) CARGO { uVal := hb_hValueAt( hHash, n ) }
         if !Empty( uVal )
            if ValType( uVal ) == "H"
               HashTree( uVal )
            elseif ValType( uVal ) == "A"
               HashTree( uVal, , oItem:cPrompt )
            endif
         endif
      next
   elseif ValType( hHash ) == "A"
      DEFAULT cParent   := "Array"
      cParent  += "[ "
      for n := 1 to Len( hHash )
         TREEITEM oItem PROMPT cParent + cValToChar( n ) + " ]" ;
            CARGO { uVal := hHash[ n ] }
         if !Empty( uVal )
            if ValType( uVal ) == "H"
               HashTree( uVal )
            elseif ValType( uVal ) == "A"
               HashTree( uVal, , oItem:cPrompt )
            endif
         endif
      next
   endif

   ENDTREE

   if ValType( nLevel ) == "N"
      if nLevel > 0
         oTree:Expand( nLevel )
      else
         oTree:OpenAll()
      endif
   endif

return oTree
 

[nageswaragunupudi]

Using the latest version of FWH, we can simply use:

Code: Select all  Expand view

JsonView( cJsonTextOrFile, cTitle )  // FWH2304
XBROWSER HashTree( cJsonText, 0 ) //FWH2307

[byron.hopp]

Mr. Rao, Which version do I need:

#define FWVERSION "FWH 23.07"
#define FW_VersionNo 23070

is what I have.

Thanks,

[Otto]

Hello byron,
an option would also be to use webview2.
Best regards,
Otto

Code: Select all  Expand view

    #include "FiveWin.ch"

    static csend2js := "send from Harbour"
    static oWebView

    function Main()
      local hPost := {}
            oWebView := TWebView():New( 1, )
        oWebView:bOnBind = { | cJson, cCalls |   hb_jsondecode( cJson, @hPost ), fromjavascirpt(hPost) ,   ;
                                        oWebView:Return( cCalls, 0, "{ 'result': '" + csend2js + "'  }" ) }
        oWebView:Bind( "SendToFWH" )
        oWebView:Navigate( Html() )
        oWebView:SetTitle( "This is Fivewin 2024" )
        Sleep( 200 )
        fromjavascirpt(hPost)
        oWebView:Run()
        oWebView:Destroy()
    return nil
    //----------------------------------------------------------------------------//

function fromjavascirpt(hPost)
        local hTemp, aTemp
        local hTemp2
   
    if len(hPost)= 0
        oWebView:SetSize( 1260, 800 )
    else
     
        aTemp := hPost[3]
       
        hTemp :=  aTemp['param1']
       
        csend2js := "gelesen in FWH " + time()
        if hTemp['btn'] = 'read-btn'
            ? hTemp['demotext']
        endif

        if hTemp['btn'] = 'add-btn'
            csend2js := "time from FWH" + time() + ":"
           
        endif
    endif
return nil
//----------------------------------------------------------------------------//


    function Html()
      local cHtml,  cJson, hPost
     
      TEXT INTO cHtml

<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display JSON Data</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <style>
    .json-table {
        width: 100%;
        border-collapse: collapse;
    }

    .json-table th, .json-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .json-table thead {
        background-color: black;
        color: white;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .json-key {
        width: 30%;
        font-weight: bold;
    }

    .json-value {
        width: 70%;
        font-size: 1.8em; /* Größere Schriftgröße für Werte */
        color: blue; /* Farbe für Werte */
    }

    .container {
        max-height: 80vh; /* 80% der Höhe des Ansichtsfensters */
        overflow-y: auto;
    }

    .json-table tr:hover {
        background-color: orange; /* Farbe beim Hover */
    }
</style>


</head>
<body>
    <div class="container mt-4">
        <div id="json-container"></div>
    </div>
    <script>
        $(document).ready(function() {
            const jsonData = {
                "numRows": 1182,
                "numPages": 591,
                "totalQuantity": 306361,
                            "data": [
                    {
                        "uprid": "543",
                        "productId": 543,
                        "stockId": -1,
                          "referenceId": 0,
            "isBundle": 0,
            "bundledProducts": [],
            "status": 1,
            "quantity": "400",
            "maximumQuantity": null,
            "ean": "",
            "sku": "",
            "model": "BCWU03W",
            "hsCode": null,
            "name": "#Hoodie",
            "price": "13.4280",
            "taxClassId": "3",
            "taxRate": "21.0000",
            "isPhysical": "1",
            "isDigital": "0",
            "isQuotation": "1",
            "url": "promotiekledingsweaterssweaters-met-kaphoodie",
            "urlAbs": "https:www.maveco-webshop.bepromotiekledingsweaterssweaters-met-kaphoodie",
            "attributesString": "",
            "backOrder": 0,
            "onHome": 0,
            "layover": 1,
            "configurationAllowCheckout": 1,
            "configurationStockCheck": 0,
              "name": "#Hoodie",
            "price": "13.4280",
            "taxClassId": "3",
            "taxRate": "21.0000",
            "isPhysical": "1",
            "isDigital": "0",
            "isQuotation": "1",
            "url": "promotiekledingsweaterssweaters-met-kaphoodie",
            "urlAbs": "https:www.maveco-webshop.bepromotiekledingsweaterssweaters-met-kaphoodie",
            "attributesString": "",
            "backOrder": 0,
            "onHome": 0,
            "layover": 1,
            "configurationAllowCheckout": 1,
            "configurationStockCheck": 0,
            "attributes": [],
            "description": "Uniseks <br> French Terry <br> Lange mouwen <br> Hooded <br> Regular fit <br> Voorgekrompen ringgesponnen katoen <br> Zijnaden <br> Gemakkelijke branding: geen B&C label <br> Binnenkant Single Jersey halfmoon in rug <br> Ongeborstelde stof <br> Sterke stof <br> Zacht handgevoel <br> Glad en gelijkmatig oppervlak <br> In zijnaad: Zacht satijnlabel",
            "addonInstagramEnabled": "0",
            "addonInstagram": "0",
            "addonOcsEnabled": "0",
            "dateAdded": "0000-00-00 00:00:00",
            "lastModified": "2020-09-11 16:41:37",
            "descriptions": {
                "description": "Uniseks <br> French Terry <br> Lange mouwen <br> Hooded <br> Regular fit <br> Voorgekrompen ringgesponnen katoen <br> Zijnaden <br> Gemakkelijke branding: geen B&C label <br> Binnenkant Single Jersey halfmoon in rug <br> Ongeborstelde stof <br> Sterke stof <br> Zacht handgevoel <br> Glad en gelijkmatig oppervlak <br> In zijnaad: Zacht satijnlabel",
                "extra": "",
                "intro": " 280 gm"  },
                                          },
                 
                ]
            };
           
       const container = $('#json-container');
        jsonData.data.forEach(item => {
            const table = $('<table class="json-table"></table>');
            const thead = $('<thead><tr><th>Key</th><th>Value</th></tr></thead>');
            table.append(thead);

            for (const key in item) {
                if (item.hasOwnProperty(key)) {
                    const row = $(`<tr><td class="json-key">${key}</td><td class="json-value">${item[key]}</td></tr>`);
                    row.click(function() {
                        alert(`Key: ${key}, Value: ${item[key]}`);
                    });
                    table.append(row);
                }
            }
            container.append(table);
        });
       
       
       
        });
    </script>
</body>
</html>






      ENDTEXT

//memowrit("c:\fwh2023\samples\log.html", cHtml)
      cHtml := STRTRAN(cHtml, CRLF, '')
      cHtml :=  URLEncode( ALLTRIM( cHtml ) )

    return cHtml
    //----------------------------------------------------------------------------//

FUNCTION URLEncode(cString)
       LOCAL cEncodedString := ""
       LOCAL nLen := LEN(cString)
       LOCAL nAscii, nPos

       FOR nPos = 1 TO nLen
          nAscii := ASC(SUBSTR(cString, nPos, 1))
          DO CASE
             CASE nAscii >= 48 .AND. nAscii <= 57 // 0-9
                cEncodedString += CHR(nAscii)
             CASE nAscii >= 65 .AND. nAscii <= 90 // A-Z
                cEncodedString += CHR(nAscii)
             CASE nAscii >= 97 .AND. nAscii <= 122 // a-z
                cEncodedString += CHR(nAscii)
             CASE nAscii == 45 .OR. nAscii == 46 .OR. nAscii == 95 .OR. nAscii == 126 // - . _ ~
                cEncodedString += CHR(nAscii)
             CASE nAscii == 10
                cEncodedString += "%0A"
             OTHERWISE
                cEncodedString += "%" + NumToHex(nAscii, 2)
          ENDCASE
       NEXT

        cEncodedString :=  "data:text/html, " + cEncodedString
RETURN cEncodedString

//----------------------------------------------------------------------------//