Nested JSON to flat HTML table

Question

I have a nested JSON object, I need to go through all levels and get properties + object name,

This is what I am expecting,

MainObject.Property1
MainObject.Property2
MainObject.Property3
ChildObject1.Property1
ChildObject1.PropertyN
ChildsChildObject1.Property1
ChildsChildObject1.PropertyN
.. so on..

I am very new to JavaScript so stay with me, I tried this but not working,

    walker(mainObject);

    function walker(object) {
        displayAllProperties(object);
        digThroughAllObjects(object);
    }

    function displayAllProperties(object) {
        for (var property in object) {
            var type = typeof object[property];
            if (type === 'string' || type === 'number' || type === 'boolean' || object[property] instanceof Date || !object[property]) {
                console.log(object + " " + property);
            }
        }
    }

    function digThroughAllObjects(object) {
        for (var property in object) {
            if (typeof property === "object") {
                walker(property);
            }
        }
    }

Update

I applied suggestion to my code and it improved a bit.

You can use this JSON, but for me my code has to work with any JSON..

JSON example

Update 2

Newest code still not working,

function displayAllProperties(object) {
  for (var property in object) {
    var type = typeof object[property];
    if (type === 'string' || type === 'number' || type === 'boolean' || object[property] instanceof Date || !object[property]) {
      console.log(object + " " + property);
    } else if (type === "object") {
      displayAllProperties(object[property]);
    }
  }
}

Update 3

I am getting JSON reply in hierarchical tree but I need to create a flat dynamic table, so my first task is to get all properties names so that I can create a column Names array and use it for creating dynamic table.

You change from `item` to `value`. Other than that the code looks about fine. — Denys Séguret, May 16 '16 at 11:02
@mplungjan Or in this case the OPs code worked fine other than a typo of variable names. — epascarello, May 16 '16 at 11:03
You need to recurse on the NEW object: displayAllProperties(object[property]); https://jsfiddle.net/mplungjan/pdexdkg2/ — mplungjan, May 16 '16 at 12:11
@mplungjan thanks for the fiddle, it is helpful, but I want ObjectName.PropertyName, not property + it's value, please see my update 3, sorry should had said this before, but OData confuses people even though it's just a JSON reply — Change, May 16 '16 at 12:16

score 2 · Answer 1 · answered May 16 '16 at 11:01

2

Look at your browser's JavaScript Console there should be an error message telling you the exact problem

function walker(item) {
    display(item);

    if (typeof value === "object") {  <-- value is not defined
        $.each(value, walker);
    }
}

answered May 16 '16 at 11:01

epascarello

204,599
20
195
236

Thanks @epascarello, I applied your suggestion but it didn't helped with end result i want, +1 for the initial help – Change May 16 '16 at 11:21
Well to get the end result, you need to build a string with parent keys. All you are doing is writing out the current key. – epascarello May 16 '16 at 11:23

score 1 · Answer 2 · edited Jun 08 '17 at 16:48

This seems to be what you want:

mainObject = {"odata.metadata":"http://services.odata.org/V3/OData/OData.svc/$metadata#Categories","value":[{"Products":[{"Supplier":{"ID":1,"Name":"Tokyo Traders","Address":{"Street":"NE 40th","City":"Redmond","State":"WA","ZipCode":"98052","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.107711791992,47.6472206115723],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":null,"ID":0,"Name":"Bread","Description":"Whole grain bread","ReleaseDate":"1992-01-01T00:00:00","DiscontinuedDate":null,"Rating":4,"Price":2.5},{"Supplier":{"ID":0,"Name":"Exotic Liquids","Address":{"Street":"NE 228th","City":"Sammamish","State":"WA","ZipCode":"98074","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.03547668457,47.6316604614258],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":{"ProductID":1,"Details":"Details of product 1"},"ID":1,"Name":"Milk","Description":"Low fat milk","ReleaseDate":"1995-10-01T00:00:00","DiscontinuedDate":null,"Rating":3,"Price":3.5}],"ID":0,"Name":"Food"},{"Products":[{"Supplier":{"ID":0,"Name":"Exotic Liquids","Address":{"Street":"NE 228th","City":"Sammamish","State":"WA","ZipCode":"98074","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.03547668457,47.6316604614258],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":{"ProductID":1,"Details":"Details of product 1"},"ID":1,"Name":"Milk","Description":"Low fat milk","ReleaseDate":"1995-10-01T00:00:00","DiscontinuedDate":null,"Rating":3,"Price":3.5},{"Supplier":{"ID":0,"Name":"Exotic Liquids","Address":{"Street":"NE 228th","City":"Sammamish","State":"WA","ZipCode":"98074","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.03547668457,47.6316604614258],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":null,"ID":2,"Name":"Vint soda","Description":"Americana Variety - Mix of 6 flavors","ReleaseDate":"2000-10-01T00:00:00","DiscontinuedDate":null,"Rating":3,"Price":20.9},{"Supplier":{"ID":0,"Name":"Exotic Liquids","Address":{"Street":"NE 228th","City":"Sammamish","State":"WA","ZipCode":"98074","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.03547668457,47.6316604614258],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":{"ProductID":3,"Details":"Details of product 3"},"ID":3,"Name":"Havina Cola","Description":"The Original Key Lime Cola","ReleaseDate":"2005-10-01T00:00:00","DiscontinuedDate":"2006-10-01T00:00:00","Rating":3,"Price":19.9},{"Supplier":{"ID":0,"Name":"Exotic Liquids","Address":{"Street":"NE 228th","City":"Sammamish","State":"WA","ZipCode":"98074","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.03547668457,47.6316604614258],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":{"ProductID":4,"Details":"Details of product 4"},"ID":4,"Name":"Fruit Punch","Description":"Mango flavor, 8.3 Ounce Cans (Pack of 24)","ReleaseDate":"2003-01-05T00:00:00","DiscontinuedDate":null,"Rating":3,"Price":22.99},{"Supplier":{"ID":0,"Name":"Exotic Liquids","Address":{"Street":"NE 228th","City":"Sammamish","State":"WA","ZipCode":"98074","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.03547668457,47.6316604614258],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":null,"ID":5,"Name":"Cranberry Juice","Description":"16-Ounce Plastic Bottles (Pack of 12)","ReleaseDate":"2006-08-04T00:00:00","DiscontinuedDate":null,"Rating":3,"Price":22.8},{"Supplier":{"ID":0,"Name":"Exotic Liquids","Address":{"Street":"NE 228th","City":"Sammamish","State":"WA","ZipCode":"98074","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.03547668457,47.6316604614258],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":null,"ID":6,"Name":"Pink Lemonade","Description":"36 Ounce Cans (Pack of 3)","ReleaseDate":"2006-11-05T00:00:00","DiscontinuedDate":null,"Rating":3,"Price":18.8},{"odata.type":"ODataDemo.FeaturedProduct","Supplier":null,"ProductDetail":null,"ID":9,"Name":"Lemonade","Description":"Classic, refreshing lemonade (Single bottle)","ReleaseDate":"1970-01-01T00:00:00","DiscontinuedDate":null,"Rating":7,"Price":1.01},{"odata.type":"ODataDemo.FeaturedProduct","Supplier":null,"ProductDetail":null,"ID":10,"Name":"Coffee","Description":"Bulk size can of instant coffee","ReleaseDate":"1982-12-31T00:00:00","DiscontinuedDate":null,"Rating":1,"Price":6.99}],"ID":1,"Name":"Beverages"},{"Products":[{"Supplier":{"ID":1,"Name":"Tokyo Traders","Address":{"Street":"NE 40th","City":"Redmond","State":"WA","ZipCode":"98052","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.107711791992,47.6472206115723],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":null,"ID":7,"Name":"DVD Player","Description":"1080P Upconversion DVD Player","ReleaseDate":"2006-11-15T00:00:00","DiscontinuedDate":null,"Rating":5,"Price":35.88},{"Supplier":{"ID":1,"Name":"Tokyo Traders","Address":{"Street":"NE 40th","City":"Redmond","State":"WA","ZipCode":"98052","Country":"USA"},"Location":{"type":"Point","coordinates":[-122.107711791992,47.6472206115723],"crs":{"type":"name","properties":{"name":"EPSG:4326"}}},"Concurrency":0},"ProductDetail":{"ProductID":8,"Details":"Details of product 8"},"ID":8,"Name":"LCD HDTV","Description":"42 inch 1080p LCD with Built-in Blu-ray Disc Player","ReleaseDate":"2008-05-08T00:00:00","DiscontinuedDate":null,"Rating":3,"Price":1088.8}],"ID":2,"Name":"Electronics"}]}

function displayAllProperties(object) {
  var parentObj = "";
  for (var property in object) {
    var type = typeof object[property];
    if (type === 'string' || type === 'number' || type === 'boolean' || object[property] instanceof Date || !object[property]) {
      console.log((parentObj?parentObj+".":"")+property+":"+object[property]);
    } else if (type === "object") {
      parentObj = property;
      displayAllProperties(object[property]);
    }
  }
}
displayAllProperties(mainObject)

Nested JSON to flat HTML table

2 Answers2