簡體   English   中英

將JSON嵌套到平面HTML表

[英]Nested JSON to flat HTML table

我有一個嵌套的JSON對象,我需要遍歷所有級別並獲取屬性+對象名稱,

這就是我所期望的

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

我對JavaScript還是很陌生,所以請和我在一起,我嘗試了一下但沒有用,

    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);
            }
        }
    }

更新

我在我的代碼中應用了建議,它有所改進。

您可以使用此JSON,但對我而言,我的代碼必須可以與任何JSON一起使用。

JSON范例

更新2

最新代碼仍然無法正常工作,

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]);
    }
  }
}

更新3

我在分層樹中得到JSON答復,但是我需要創建一個平面動態表,所以我的第一個任務是獲取所有屬性名稱,以便創建列Names數組並將其用於創建動態表。

查看瀏覽器的JavaScript控制台,應該有一條錯誤消息告訴您確切的問題

function walker(item) {
    display(item);

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

這似乎是您想要的:

 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) 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM