topic-42566

Posts: 6983

Joined: Fri Oct 07, 2005 07:07 PM

How to Use fetch() with JSON
Posted: Mon Dec 05, 2022 06:55 PM

Hello friends,
I made a small testprogram.
Best regards,
Otto
Download
https://winhotel.org/modchat/download/mh_fetch.zip

fetchtestjson.prg

Code (fw): Select all Collapse

function main

TEMPLATE

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
    <h1>Fetch test</h1>
    <p>This is a paragraph.</p>
    
    <p id="demo">Fetch a file to change this text.</p>
    
    <p id="demo2">Fetch a file to change this text.</p>
    
    <button onclick="readfetch()">Fetch table</button>
    
    <script>
        
        function readfetch(){
            let file = "fetch_infojson.prg?postjsondata"
            var orequest = {};
    
                orequest[ "REQUEST1NAME" ] = "Daten einlesen";
                orequest[ "SORTING" ] = "KATEGORIE";
                
                orequest[ "REPORT_TYPE" ] = "GUV";
                orequest[ "REPORT_SORTING" ] = "EINNAHMEN" ;
                
                orequest[ "REPORT_VON" ] = "2022-01-01"    ;                                                                                  
                orequest[ "REPORT_BIS" ] = "2022-12-31"  ;         


            fetch (file,{
                method: 'POST',
                    headers: {
                      'Accept': 'application/json, text/plain, */*',
                      'Content-Type': 'application/json'
                    },
                    body: JSON.stringify( orequest )
                  }).then(x => x.text())
                    .then(y => document.getElementById("demo").innerHTML = y) ;
        }
        
        function readTextFile(file)
        {
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file);
            rawFile.onreadystatechange = function ()
            {
                if(rawFile.readyState === 4)
                {
                    if(rawFile.status === 200 || rawFile.status == 0)
                    {
                        var allText = rawFile.responseText;
                        document.getElementById("demo2").innerHTML= allText;
                    }
                }
            }
            rawFile.send(null);
        }
        
      //  var file2 ="newfile.txt";
     //   readTextFile( file2 );
        
    </script>
    
</body>
</html> 
        
ENDTEXT
        
return 
//----------------------------------------------------------------------------//

fetch_infojson.prg

Code (fw): Select all Collapse

function main
  local hValues
  
  
  AP_SetContentType( "application/json" )
  
  
  logline("start", time())
  logline("AP_Args",ValToChar( AP_Args() ) )
  
  hb_jsonDecode( AP_Body(), @hValues )
  
  logline("AP_Body", ValToChar( hValues ) )
  
  logline("REQUEST1NAME",hValues[ "REQUEST1NAME" ] )
  logline("SORTING",hValues[ "SORTING" ] )
  
  logline("REPORT_TYPE",hValues[ "REPORT_TYPE" ] )
  logline("REPORT_SORTING",hValues[ "REPORT_SORTING" ] )
  
  logline("REPORT_VON",hValues[ "REPORT_VON" ] )                                                                               
  logline("REPORT_BIS",hValues[ "REPORT_BIS" ] )
     
  
  ?? '<H1>Uhrzeit</H1>'
  ?? time()
  
  TEMPLATE  
  
  <!DOCTYPE html>
  <html>
  
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fetch test</title>
  
  <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/start/jquery-ui.min.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.2/quartz/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> 
  <STYLE>
  
  h1 {
  font-weight: normal;
    letter-spacing: -1px;
      color: #34495E;
        }
  
  .rwd-table {
  background: #34495E;
    color: #fff;
      border-radius: .4em;
        overflow: hidden;
          width: 100%;
            tr {
  border-color: lighten(#34495E, 10%);
    }
  th, td {
  margin: .5em 1em;
    @media (min-width: $breakpoint-alpha) { 
  padding: 1em !important; 
  }
  }
  th, td:before {
  color: #dd5;
    }
  }
  
  </STYLE> 
  
  </head>
  
  <div class="container">
  <h1>RWD List to Table</h1>
  
  <table id="productSizes" class="rwd-table">
  <thead>
  <tr class="d-flex">
  <th class="col-1">Size</th>
  <th class="col-3">Bust</th>
  <th class="col-3">Waist</th>
  <th class="col-5">Hips</th>
  </tr>
  </thead>
  <tbody>
  <tr class="d-flex">
  <td class="col-1">6</td>
  <td class="col-3">79 - 81</td>
  <td class="col-3">61 - 63</td>
  <td class="col-5">89 - 91</td>
  </tr>
  <tr class="d-flex">
  <td class="col-1">8</td>
  <td class="col-3">84 - 86</td>
  <td class="col-3">66 - 68</td>
  <td class="col-5">94 - 96</td>
  </tr>
  </tbody>
  </table>
  
  </div>
  </body>
  </html> 
  
ENDTEXT   

return nil
//----------------------------------------------------------------------------//

function logline( cText, cWert )
  
  local cLog
  local cFile := ""
  local cPRGPATH := ""
  
  cPRGPATH := hb_GetEnv( "PRGPATH" )
  cPRGPATH := STRTRAN( cPRGPATH  ,"/","\")
  
  cFile := cPRGPATH + "\log.log"
  
  cLog := memoread( cFile )
  
  if VALTYPE(cText) = "U"
    cText := ""
  endif
  if VALTYPE(cWert) = "U"
    cWert := ""
  endif
  cLog   +=  ALLTRIM( str(procline(1)) ) + "    "  + PadR( cText, 40 ) + ":  " + cWert + CRLF
  
  MEMOWRIT( cFile, cLog, .f. )
  
return nil
//----------------------------------------------------------------------------//

FiveTech Support Forums

Continue the discussion