Convert JSON data to HTML table

srikanthpilli · ‎05-24-2017

Hello,

I am looking to find a way where I can convert JSON data to HTML table - where it should capture and display only the "name" and "alias" attributes into the HTML table from the following external json url :

https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0?f=pjson

Could you please provide your inputs on it.

Thanks

Srikanth

KellyHutchins · ‎05-24-2017

So you just want to show the values for the alias and field name? If so something like this should work.

<!DOCTYPE html>
<html>
<head>
  <title>JSON Content</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
     table, th, td {
           border: 1px solid #ccc;
           border-collapse: collapse;
      }
      th, td{
        padding:0.5em;
      }
  </style>

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    require([
        "dojo/dom",
        "dojo/on",
        "dojo/dom-class",
        "dojo/_base/json",
        "esri/config",
        "esri/request",
        "dojo/domReady!"
      ],
      function(
        dom,
        on,
        domClass,
        dojoJson,
        esriConfig,
        esriRequest
      ) {


          esriConfig.defaults.io.proxyUrl = "url to proxy";

          var requestHandle = esriRequest({
            "url": "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",
            "content": {
              "f": "json"
            }
          });
          requestHandle.then(createTable, function(error){
            console.log("Request Failed");
          });
    

        function createTable(response, io){
     
        
          var tbl = document.getElementById("tableDiv");
          var tblBody = document.createElement("tbody");

          var header = tbl.createTHead();
          var headerRow = header.insertRow(0);
          var headerCell = document.createElement("th");
          headerCell.innerHTML = "Name";
          headerRow.appendChild(headerCell);
          var headerCell2 = document.createElement("th");
          headerCell2.innerHTML = "Alias";
          headerRow.appendChild(headerCell2);




          response.fields.forEach(function(field){
            var row = document.createElement("tr");
            var cell = document.createElement("td");
            var cell2 = document.createElement("td");
            cell.innerHTML = field.name;
            cell2.innerHTML = field.alias;
            row.appendChild(cell);
            row.appendChild(cell2);
            tblBody.appendChild(row);
          });
          
          tbl.appendChild(tblBody);
  
   

        }
       
    });
  </script>

</head>
<body>
  <table id="tableDiv"></table>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

KellyHutchins · ‎05-24-2017

So you just want to show the values for the alias and field name? If so something like this should work.

<!DOCTYPE html>
<html>
<head>
  <title>JSON Content</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
     table, th, td {
           border: 1px solid #ccc;
           border-collapse: collapse;
      }
      th, td{
        padding:0.5em;
      }
  </style>

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    require([
        "dojo/dom",
        "dojo/on",
        "dojo/dom-class",
        "dojo/_base/json",
        "esri/config",
        "esri/request",
        "dojo/domReady!"
      ],
      function(
        dom,
        on,
        domClass,
        dojoJson,
        esriConfig,
        esriRequest
      ) {


          esriConfig.defaults.io.proxyUrl = "url to proxy";

          var requestHandle = esriRequest({
            "url": "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",
            "content": {
              "f": "json"
            }
          });
          requestHandle.then(createTable, function(error){
            console.log("Request Failed");
          });
    

        function createTable(response, io){
     
        
          var tbl = document.getElementById("tableDiv");
          var tblBody = document.createElement("tbody");

          var header = tbl.createTHead();
          var headerRow = header.insertRow(0);
          var headerCell = document.createElement("th");
          headerCell.innerHTML = "Name";
          headerRow.appendChild(headerCell);
          var headerCell2 = document.createElement("th");
          headerCell2.innerHTML = "Alias";
          headerRow.appendChild(headerCell2);




          response.fields.forEach(function(field){
            var row = document.createElement("tr");
            var cell = document.createElement("td");
            var cell2 = document.createElement("td");
            cell.innerHTML = field.name;
            cell2.innerHTML = field.alias;
            row.appendChild(cell);
            row.appendChild(cell2);
            tblBody.appendChild(row);
          });
          
          tbl.appendChild(tblBody);
  
   

        }
       
    });
  </script>

</head>
<body>
  <table id="tableDiv"></table>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

srikanthpilli · ‎05-25-2017

Thanks Kelly for looking into it, I copied your code and executed - it doesn't provide any results.

Am I missing anything?

Thanks

Srikanth

KellyHutchins · ‎05-25-2017

You'll need to setup a proxy and enter the proxy url on line 38 or use a service running on a server that supports CORS. Details can be found here:

Using the proxy | Guide | ArcGIS API for JavaScript 3.20

MirHashmi · ‎05-28-2017

Hi,

Here is an implementation of the same solution given by @KellyHutchins through Jquery and without a proxy. Working link to JSBin.

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
          $(document).ready(function(){               
                    $.ajax({
                         url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",
                         data: "f=pjson",
                         success: function (data) {
                              //console.log(data);
                              createTable(data);
                         }
                    }); 
          });
          
          function createTable(response){
     
        
          var tbl = document.getElementById("tableDiv");
          var tblBody = document.createElement("tbody");

          var header = tbl.createTHead();
          var headerRow = header.insertRow(0);
          var headerCell = document.createElement("th");
          headerCell.innerHTML = "Name";
          headerRow.appendChild(headerCell);
          var headerCell2 = document.createElement("th");
          headerCell2.innerHTML = "Alias";
          headerRow.appendChild(headerCell2);

          JSON.parse(response).fields.forEach(function(field){
            var row = document.createElement("tr");
            var cell = document.createElement("td");
            var cell2 = document.createElement("td");
            cell.innerHTML = field.name;
            cell2.innerHTML = field.alias;
            row.appendChild(cell);
            row.appendChild(cell2);
            tblBody.appendChild(row);
          });
          
          tbl.appendChild(tblBody);
        }          
  </script>   
</head>
<body>
   <table id="tableDiv"></table>
</body>
</html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍