complexJSON to HTML Table

Related searches

I know this has been asked a lot, but I just can't help myself, because the my JSON has some weird format in my opinion. Im calling the bing api you can see below and it reports a JSON like this:

{
  "authenticationResultCode": "ValidCredentials",
  "brandLogoUri": "http:dev.virtualearth.netBrandinglogo_powered_by.png",
  "copyright": "Copyright © 2020 Microsoft and its suppliers. All rights reserved. This API cannot be accessed and the content and any results may not be used, reproduced or transmitted in any manner without express written permission from Microsoft Corporation.",
  "resourceSets": [
    {
      "estimatedTotal": 44,
      "resources": [
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.12575,
              11.50249
            ]
          },
          "description": "Bei München-Laim - Stockender Verkehr;; vorsichtig an das Stauende heranfahren.",
          "end": "Date(1581665178000)",
          "incidentId": 1717453254024927000,
          "lastModified": "Date(1581643942010)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581061714000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.12562,
              11.5046
            ]
          },
          "type": 2,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.10819,
              11.61907
            ]
          },
          "description": "Bei Woferlstraße - Bauarbeiten auf Abschnitt.",
          "end": "Date(1581974827000)",
          "incidentId": 4267251995514645000,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629269000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.10819,
              11.61907
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.14469,
              11.55741
            ]
          },
          "description": "Zwischen Karlstraße und Hirtenstraße - Bauarbeiten auf Abschnitt.",
          "end": "Date(1585778340000)",
          "incidentId": 3021451548046648000,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629270000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14314,
              11.55658
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.14314,
              11.58826
            ]
          },
          "description": "Bei Franz-Josef-Strauß-Ring - Baustelle.",
          "end": "Date(1609369140000)",
          "incidentId": 337182766905069500,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629314000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14423,
              11.58316
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.141,
              11.5613
            ]
          },
          "description": "Bei Karlsplatz - Bauarbeiten auf Abschnitt. Fahrbahn von auf einen Fahrstreifen verengt.",
          "end": "Date(1581974827000)",
          "incidentId": 1310817648090719700,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629270000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14186,
              11.56163
            ]
          },
          "type": 9,
          "verified": true
        }
      ]
    }
  ]
}

I just can't help myself to get only the description part into a simple html table. the following is what i tried by now.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
    $.getJSON("http://dev.virtualearth.net/REST/v1/Traffic/Incidents/48.052165,11.722993,48.222626,11.391344?key=BINGKEY").then(function(data)
{console.log(data);

   var tr = data
    for (var i = 0; i < data.resourceSets.estimatedTotal; i++) {
    var tr = $('<tr/>');

    // Indexing into data.report for each td element
    $(tr).append("<td>" + data.resourceSets.resources[i].description + "</td>");
    $('.table1').append(tr);
    }

});
</script>

<table class="table1">
    <tr>
        <th>description</th>
    </tr>
</table>
</body>
</html>

maybe someone can help me with my problem. Thanks


resourceSets is collection in json and you are trying to access it as normal property.

for(var s = 0; s < data.resourceSets.length; s++) {

    for (var i = 0; i < data.resourceSets[s].resources.length; i++) { 
        var tr = $('<tr/>');

        // Indexing into data.report for each td element
        $(tr).append("<td>" + data.resourceSets[s].resources[i].description + "</td>");
        $('.table1').append(tr);
    }
}

Side but related note: estimatedTotal is 44, but in the json that is posted, has only 5 resources. Are you sure you want to iterate 44 times? if yes, you need to watch array index out of range exception.

Convert Nested JSON to HTML Table — React, Javascript, A simple react component to convert any nested JSON object or array into an HTML table. For this implementation, we will create a simple component in React that converts any nested JSON object into an HTML table. The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables: This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table.


I would declare an iterable list of fields and then dynamically loop-over the resources.

[ 'description', 'severity', 'point.coordinates[0]', 'point.coordinates[1]' ]

Note: You can append multiple items by mapping as seen below.

Update: You can resolve nested fields by implementing a recursive function as seen below.

Instead of this:

return $('<td>').text(resource[field]);

You can use this:

return $('<td>').text(resolveField(resource, field));

Warning: It's not fool-proof, because it fails at multiple nested arrays e.g. foo[0][0].

Demo

let fields = [ 'description', 'severity', 'point.coordinates[0]', 'point.coordinates[1]' ];
let data = getData();

$('.table-1 tbody').append(data.resourceSets.flatMap(resourceSet => {
  return resourceSet.resources.map(resource => {
    return $('<tr>').append(fields.map(field => {
      return $('<td>').text(resolveField(resource, field));
    }));
  });
}));

// Adapted from: https://stackoverflow.com/a/19156197/1762224
function resolveField(obj, prop) {
  return prop.match(/[^\]\[.]+/g)
    .map(token => {
      return Number.isInteger(token)
        ? parseInt(token, 10)
        : token.replace(/^['"](.+(?=['"]$))['"]$/, '$1');
    })
    .reduce((ref, curr) => {
      if (ref != null) {
        if (Array.isArray(ref)) {
          return ref[curr];
        } else if (typeof ref === 'object') {
          if (ref.hasOwnProperty(curr)) {
            return ref[curr];
          }
        }
      }
      return null;
    }, obj);
}

function getData() {
  return {
    "authenticationResultCode": "ValidCredentials",
    "brandLogoUri": "http:dev.virtualearth.netBrandinglogo_powered_by.png",
    "copyright": "Copyright © 2020 Microsoft and its suppliers. All rights reserved. This API cannot be accessed and the content and any results may not be used, reproduced or transmitted in any manner without express written permission from Microsoft Corporation.",
    "resourceSets": [{
      "estimatedTotal": 44,
      "resources": [{
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.12575,
              11.50249
            ]
          },
          "description": "Bei München-Laim - Stockender Verkehr;; vorsichtig an das Stauende heranfahren.",
          "end": "Date(1581665178000)",
          "incidentId": 1717453254024927000,
          "lastModified": "Date(1581643942010)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581061714000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.12562,
              11.5046
            ]
          },
          "type": 2,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.10819,
              11.61907
            ]
          },
          "description": "Bei Woferlstraße - Bauarbeiten auf Abschnitt.",
          "end": "Date(1581974827000)",
          "incidentId": 4267251995514645000,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629269000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.10819,
              11.61907
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.14469,
              11.55741
            ]
          },
          "description": "Zwischen Karlstraße und Hirtenstraße - Bauarbeiten auf Abschnitt.",
          "end": "Date(1585778340000)",
          "incidentId": 3021451548046648000,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629270000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14314,
              11.55658
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.14314,
              11.58826
            ]
          },
          "description": "Bei Franz-Josef-Strauß-Ring - Baustelle.",
          "end": "Date(1609369140000)",
          "incidentId": 337182766905069500,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629314000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14423,
              11.58316
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.141,
              11.5613
            ]
          },
          "description": "Bei Karlsplatz - Bauarbeiten auf Abschnitt. Fahrbahn von auf einen Fahrstreifen verengt.",
          "end": "Date(1581974827000)",
          "incidentId": 1310817648090719700,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629270000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14186,
              11.56163
            ]
          },
          "type": 9,
          "verified": true
        }
      ]
    }]
  };
}
table { border-collapse: collapse; }
table, th, td { border: thin solid #AA5555; }
th, td { padding: 0.25em; }
thead tr { background: #EE8888; }
tbody tr:nth-child(even) { background: #EECCCC; }
tbody tr:nth-child(odd)  { background: #FFEEEE; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-1">
  <thead>
  <tr>
    <th>Description</th>
    <th>Severity</th>
    <th>Lat</th>
    <th>Lon</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Create nested html tables from complex JSON, So end users can toggle nested table and look inside in those child elements. To achieve this I serialized the object in to JSON string and a� JSON to HTML Converter: Online tool to Convert JSON to HTML. This tool will help you to convert your JSON String/Data to HTML Table ; To Save and Share this code


It is very hard to parse json in javascript and display that data in html.Handlebars is the option to your solution.The dynamic data produced from the API can be easily embedded using handlebars.Refer the site below for more information.Hope this helps.

Introduction to Handlebars.js

Nested tables from json, Answer to Stackoverflow question regarding nested tables from a nested json structure. index.html#. <!DOCTYPE html> <meta charset="utf� Download code: http://codewithmark.com/convert-your-api-json-data-to-html-table Awesome Functions: http://awesomefunctions.com Please watch: "Learn how to cr


DataTables example, Previous1234Next. Javascript; HTML; CSS; Server script; Comments (0); Ajax load; Ajax data. The Javascript shown below is used to initialise the table shown in� Create nested html tables from complex JSON Posted on August 9, 2014 by urkp6 Recently I came a cross to implement a nested tables from complex object ( object that has more children objects).


Table attributes are added via the table_attributes parameter. This parameter should be a dict of (key, value) pairs to apply to the table in the form key="value".If in our simple example before we additionally wanted to apply a class attribute of "table table-striped" we would use the following:


Related: Now learn how to bind JSON data to an HTML table in AngularJS using ng-repeat. First, I’ll extract values for my tables Header. Therefore, I have declared another array called var col = []. It will loop through each JSON data and will check the first key index and store it in the array. See this in console.