展平嵌套的 JSON 并输出到 HTML 表

【问题标题】：Flattening a Nested JSON and output to HTML Table展平嵌套的 JSON 并输出到 HTML 表
【发布时间】：2021-11-03 11:06:32
【问题描述】：

我有这个来自 DACHSER API 系统的 JSON 字符串：

{"shipments":[{"id":"A8225707231474437120","shipmentDate":"2021-10-28","forwarder":{"id":"60","partnerGLN":"5990034733003","names":["LIEGL & DACHSER KFT."],"addressInformation":{"city":"Pilisvörösvár","postalCode":"2085","countryCode":"HU"}},"shipmentWeight":{"weight":921.18,"unit":"kg"},"portOfDeparture":"LGW","portOfDestination":"MUC","consignor":{"id":"97165904","partnerGLN":"6174283362387","names":["Harry Potter"],"addressInformation":{"streets":["4 Privet Drive"],"city":"Little Whinging, Surrey","postalCode":"CB22 4RG","countryCode":"GB"}},"consignee":{"id":"68779302","partnerGLN":"8588788490809","names":["Ernie & Bert"],"addressInformation":{"streets":["Sesamstraße 9b"],"city":"Köln","postalCode":"50997","countryCode":"DE"}},"references":[{"code":"003","value":"OXOL5qaUnT"},{"code":"007","value":"3jVokinNYf"},{"code":"HAW","value":"wyf41593468"}],"status":[{"statusSequence":1,"id":"61116611867","statusDate":"2021-10-26T11:33:00","eventSetter":{"id":"250","partnerGLN":"4046823000007","names":["DACHSER Denmark A/S Logistics Centre Copenhagen"],"addressInformation":{"city":"Hvidovre","postalCode":"2650","countryCode":"DK"}},"event":{"code":"K","extendedCode":"AS","description":"Non livré destinataire préavis"},"contactPerson":"Pumuckel c/o Eder","adviceDate":"2021-10-28"}]},{"id":"4355966256","shipmentDate":"2021-10-29","forwarder":{"id":"6","partnerGLN":"4022128000003","names":["DACHSER SE Logistikzentrum Allgäu"],"addressInformation":{"city":"Memmingen","postalCode":"87700","countryCode":"DE"}},"shipmentWeight":{"weight":460.48,"unit":"kg"},"consignor":{"id":"21946026","partnerGLN":"1290415437220","names":["Lucky Luke"],"addressInformation":{"streets":["Hot Stone Highway 47"],"city":"Texas City","postalCode":"77590","countryCode":"US"}},"consignee":{"id":"97165904","partnerGLN":"6174283362387","names":["Harry Potter"],"addressInformation":{"streets":["4 Privet Drive"],"city":"Little Whinging, Surrey","postalCode":"CB22 4RG","countryCode":"GB"}},"ssccs":["00335958250047964662"],"references":[{"code":"003","value":"HYtLv5pYb8"},{"code":"007","value":"osjY4448fd"},{"code":"SN","value":"4355966256"}],"status":[{"statusSequence":1,"id":"11391241896","statusDate":"2021-10-26T11:33:00","eventSetter":{"id":"250","partnerGLN":"4046823000007","names":["DACHSER Denmark A/S Logistics Centre Copenhagen"],"addressInformation":{"city":"Hvidovre","postalCode":"2650","countryCode":"DK"}},"event":{"code":"R","extendedCode":"","description":"Mis en Livraison"},"ssccs":["00335958250047964662"]}]},{"id":"A2820280876091990016","shipmentDate":"2021-10-28","forwarder":{"id":"250","partnerGLN":"4046823000007","names":["DACHSER Denmark A/S Logistics Centre Copenhagen"],"addressInformation":{"city":"Hvidovre","postalCode":"2650","countryCode":"DK"}},"shipmentWeight":{"weight":861.59,"unit":"kg"},"portOfDeparture":"MUC","portOfDestination":"CGC","consignor":{"id":"68779302","partnerGLN":"8588788490809","names":["Ernie & Bert"],"addressInformation":{"streets":["Sesamstraße 9b"],"city":"Köln","postalCode":"50997","countryCode":"DE"}},"consignee":{"id":"21269784","partnerGLN":"8340338594266","names":["Daisy Duck"],"addressInformation":{"streets":["Boulevard de Parc 12"],"city":"Coupvray","postalCode":"77700","countryCode":"FR"}},"references":[{"code":"003","value":"q9Fa6SXXFr"},{"code":"007","value":"FuEegxLYOv"},{"code":"HAW","value":"niw37194349"}],"status":[{"statusSequence":1,"id":"45310828399","statusDate":"2021-10-26T11:33:00","eventSetter":{"id":"250","partnerGLN":"4046823000007","names":["DACHSER Denmark A/S Logistics Centre Copenhagen"],"addressInformation":{"city":"Hvidovre","postalCode":"2650","countryCode":"DK"}},"event":{"code":"R","extendedCode":"","description":"Mis en Livraison"}}]}]}

并且，使用 javascript，这是我想要得到的预期输出。如您所见，JSON 级别都连接在表头中。 如有必要，我可以添加更多详细信息，请在 cmets 中询问。 实际上，在 stackoverflow 中找到的所有示例都没有按照我的预期进行。

https://jsfiddle.net/cetipabo/b34gqxmf/29/

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">shipments/id</th>
<th title="Field #2">shipments/shipmentDate</th>
<th title="Field #3">shipments/forwarder/id</th>
<th title="Field #4">shipments/forwarder/partnerGLN</th>
<th title="Field #5">shipments/forwarder/names/0</th>
<th title="Field #6">shipments/forwarder/addressInformation/city</th>
<th title="Field #7">shipments/forwarder/addressInformation/postalCode</th>
<th title="Field #8">shipments/forwarder/addressInformation/countryCode</th>
<th title="Field #9">shipments/shipmentWeight/weight</th>
<th title="Field #10">shipments/shipmentWeight/unit</th>
<th title="Field #11">shipments/portOfDeparture</th>
<th title="Field #12">shipments/portOfDestination</th>
<th title="Field #13">shipments/consignor/id</th>
<th title="Field #14">shipments/consignor/partnerGLN</th>
<th title="Field #15">shipments/consignor/names/0</th>
<th title="Field #16">shipments/consignor/addressInformation/streets/0</th>
<th title="Field #17">shipments/consignor/addressInformation/city</th>
<th title="Field #18">shipments/consignor/addressInformation/postalCode</th>
<th title="Field #19">shipments/consignor/addressInformation/countryCode</th>
<th title="Field #20">shipments/consignee/id</th>
<th title="Field #21">shipments/consignee/partnerGLN</th>
<th title="Field #22">shipments/consignee/names/0</th>
<th title="Field #23">shipments/consignee/addressInformation/streets/0</th>
<th title="Field #24">shipments/consignee/addressInformation/city</th>
<th title="Field #25">shipments/consignee/addressInformation/postalCode</th>
<th title="Field #26">shipments/consignee/addressInformation/countryCode</th>
<th title="Field #27">shipments/references/0/code</th>
<th title="Field #28">shipments/references/0/value</th>
<th title="Field #29">shipments/references/1/code</th>
<th title="Field #30">shipments/references/1/value</th>
<th title="Field #31">shipments/references/2/code</th>
<th title="Field #32">shipments/references/2/value</th>
<th title="Field #33">shipments/status/0/statusSequence</th>
<th title="Field #34">shipments/status/0/id</th>
<th title="Field #35">shipments/status/0/statusDate</th>
<th title="Field #36">shipments/status/0/eventSetter/id</th>
<th title="Field #37">shipments/status/0/eventSetter/partnerGLN</th>
<th title="Field #38">shipments/status/0/eventSetter/names/0</th>
<th title="Field #39">shipments/status/0/eventSetter/addressInformation/city</th>
<th title="Field #40">shipments/status/0/eventSetter/addressInformation/postalCode</th>
<th title="Field #41">shipments/status/0/eventSetter/addressInformation/countryCode</th>
<th title="Field #42">shipments/status/0/event/code</th>
<th title="Field #43">shipments/status/0/event/extendedCode</th>
<th title="Field #44">shipments/status/0/event/description</th>
<th title="Field #45">shipments/status/0/contactPerson</th>
<th title="Field #46">shipments/status/0/adviceDate</th>
<th title="Field #47">shipments/ssccs/0</th>
<th title="Field #48">shipments/status/0/ssccs/0</th>
</tr></thead>
<tbody><tr>
<td>A8225707231474437120</td>
<td>2021-10-28</td>
<td align="right">60</td>
<td align="right">5990034733003</td>
<td>LIEGL &amp; DACHSER KFT.</td>
<td>Pilisvörösvár</td>
<td align="right">2085</td>
<td>HU</td>
<td align="right">921.18</td>
<td>kg</td>
<td>LGW</td>
<td>MUC</td>
<td align="right">97165904</td>
<td align="right">6174283362387</td>
<td>Harry Potter</td>
<td>4 Privet Drive</td>
<td>Little Whinging, Surrey</td>
<td>CB22 4RG</td>
<td>GB</td>
<td align="right">68779302</td>
<td align="right">8588788490809</td>
<td>Ernie &amp; Bert</td>
<td>Sesamstraße 9b</td>
<td>Köln</td>
<td>50997</td>
<td>DE</td>
<td align="right">003</td>
<td>OXOL5qaUnT</td>
<td align="right">007</td>
<td>3jVokinNYf</td>
<td>HAW</td>
<td>wyf41593468</td>
<td>1</td>
<td align="right">61116611867</td>
<td>2021-10-26T11:33:00</td>
<td align="right">250</td>
<td align="right">4046823000007</td>
<td>DACHSER Denmark A/S Logistics Centre Copenhagen</td>
<td>Hvidovre</td>
<td align="right">2650</td>
<td>DK</td>
<td>K</td>
<td>AS</td>
<td>Non livré destinataire préavis</td>
<td>Pumuckel c/o Eder</td>
<td>2021-10-28</td>
<td align="right"></td>
<td align="right"></td>
</tr>
<tr>
<td>4355966256</td>
<td>2021-10-29</td>
<td align="right">6</td>
<td align="right">4022128000003</td>
<td>DACHSER SE Logistikzentrum Allgäu</td>
<td>Memmingen</td>
<td align="right">87700</td>
<td>DE</td>
<td align="right">460.48</td>
<td>kg</td>
<td> </td>
<td> </td>
<td align="right">21946026</td>
<td align="right">1290415437220</td>
<td>Lucky Luke</td>
<td>Hot Stone Highway 47</td>
<td>Texas City</td>
<td>77590</td>
<td>US</td>
<td align="right">97165904</td>
<td align="right">6174283362387</td>
<td>Harry Potter</td>
<td>4 Privet Drive</td>
<td>Little Whinging, Surrey</td>
<td>CB22 4RG</td>
<td>GB</td>
<td align="right">003</td>
<td>HYtLv5pYb8</td>
<td align="right">007</td>
<td>osjY4448fd</td>
<td>SN</td>
<td>4355966256</td>
<td>1</td>
<td align="right">11391241896</td>
<td>2021-10-26T11:33:00</td>
<td align="right">250</td>
<td align="right">4046823000007</td>
<td>DACHSER Denmark A/S Logistics Centre Copenhagen</td>
<td>Hvidovre</td>
<td align="right">2650</td>
<td>DK</td>
<td>R</td>
<td> </td>
<td>Mis en Livraison</td>
<td> </td>
<td> </td>
<td align="right">00335958250047964662</td>
<td align="right">00335958250047964662</td>
</tr>
<tr>
<td>A2820280876091990016</td>
<td>2021-10-28</td>
<td align="right">250</td>
<td align="right">4046823000007</td>
<td>DACHSER Denmark A/S Logistics Centre Copenhagen</td>
<td>Hvidovre</td>
<td align="right">2650</td>
<td>DK</td>
<td align="right">861.59</td>
<td>kg</td>
<td>MUC</td>
<td>CGC</td>
<td align="right">68779302</td>
<td align="right">8588788490809</td>
<td>Ernie &amp; Bert</td>
<td>Sesamstraße 9b</td>
<td>Köln</td>
<td>50997</td>
<td>DE</td>
<td align="right">21269784</td>
<td align="right">8340338594266</td>
<td>Daisy Duck</td>
<td>Boulevard de Parc 12</td>
<td>Coupvray</td>
<td>77700</td>
<td>FR</td>
<td align="right">003</td>
<td>q9Fa6SXXFr</td>
<td align="right">007</td>
<td>FuEegxLYOv</td>
<td>HAW</td>
<td>niw37194349</td>
<td>1</td>
<td align="right">45310828399</td>
<td>2021-10-26T11:33:00</td>
<td align="right">250</td>
<td align="right">4046823000007</td>
<td>DACHSER Denmark A/S Logistics Centre Copenhagen</td>
<td>Hvidovre</td>
<td align="right">2650</td>
<td>DK</td>
<td>R</td>
<td> </td>
<td>Mis en Livraison</td>
<td> </td>
<td> </td>
<td align="right"></td>
<td align="right"></td>
</tr>
</tbody></table>

【问题讨论】：

    标签： html json


    【解决方案1】：

    我在JSFiddle 中找到了如何使用 datatables.net 处理此问题 但这不是一个很好的方法，因为我必须在 HTML 部分中手动创建行，也在 JS 部分中。一种自动创建标题并填充行的方法会更好。 因此，要使其正常工作，我必须通过删除此 {"shipments": 和最新的 }

    来修改 JSON 

    var data = [{
  "id": "A8225707231474437120",
  "shipmentDate": "2021-10-28",
  "forwarder": {
    "id": "60",
    "partnerGLN": "5990034733003",
    "names": ["LIEGL & DACHSER KFT."],
    "addressInformation": {
      "city": "Pilisvörösvár",
      "postalCode": "2085",
      "countryCode": "HU"
    }
  },
  "shipmentWeight": {
    "weight": 921.18,
    "unit": "kg"
  },
  "portOfDeparture": "LGW",
  "portOfDestination": "MUC",
  "consignor": {
    "id": "97165904",
    "partnerGLN": "6174283362387",
    "names": ["Harry Potter"],
    "addressInformation": {
      "streets": ["4 Privet Drive"],
      "city": "Little Whinging, Surrey",
      "postalCode": "CB22 4RG",
      "countryCode": "GB"
    }
  },
  "consignee": {
    "id": "68779302",
    "partnerGLN": "8588788490809",
    "names": ["Ernie & Bert"],
    "addressInformation": {
      "streets": ["Sesamstraße 9b"],
      "city": "Köln",
      "postalCode": "50997",
      "countryCode": "DE"
    }
  },
  "references": [{
    "code": "003",
    "value": "OXOL5qaUnT"
  }, {
    "code": "007",
    "value": "3jVokinNYf"
  }, {
    "code": "HAW",
    "value": "wyf41593468"
  }],
  "status": [{
    "statusSequence": 1,
    "id": "61116611867",
    "statusDate": "2021-10-26T11:33:00",
    "eventSetter": {
      "id": "250",
      "partnerGLN": "4046823000007",
      "names": ["DACHSER Denmark A/S Logistics Centre Copenhagen"],
      "addressInformation": {
        "city": "Hvidovre",
        "postalCode": "2650",
        "countryCode": "DK"
      }
    },
    "event": {
      "code": "K",
      "extendedCode": "AS",
      "description": "Non livré destinataire préavis"
    },
    "contactPerson": "Pumuckel c/o Eder",
    "adviceDate": "2021-10-28"
  }]
}, {
  "id": "4355966256",
  "shipmentDate": "2021-10-29",
  "forwarder": {
    "id": "6",
    "partnerGLN": "4022128000003",
    "names": ["DACHSER SE Logistikzentrum Allgäu"],
    "addressInformation": {
      "city": "Memmingen",
      "postalCode": "87700",
      "countryCode": "DE"
    }
  },
  "shipmentWeight": {
    "weight": 460.48,
    "unit": "kg"
  },
  "consignor": {
    "id": "21946026",
    "partnerGLN": "1290415437220",
    "names": ["Lucky Luke"],
    "addressInformation": {
      "streets": ["Hot Stone Highway 47"],
      "city": "Texas City",
      "postalCode": "77590",
      "countryCode": "US"
    }
  },
  "consignee": {
    "id": "97165904",
    "partnerGLN": "6174283362387",
    "names": ["Harry Potter"],
    "addressInformation": {
      "streets": ["4 Privet Drive"],
      "city": "Little Whinging, Surrey",
      "postalCode": "CB22 4RG",
      "countryCode": "GB"
    }
  },
  "ssccs": ["00335958250047964662"],
  "references": [{
    "code": "003",
    "value": "HYtLv5pYb8"
  }, {
    "code": "007",
    "value": "osjY4448fd"
  }, {
    "code": "SN",
    "value": "4355966256"
  }],
  "status": [{
    "statusSequence": 1,
    "id": "11391241896",
    "statusDate": "2021-10-26T11:33:00",
    "eventSetter": {
      "id": "250",
      "partnerGLN": "4046823000007",
      "names": ["DACHSER Denmark A/S Logistics Centre Copenhagen"],
      "addressInformation": {
        "city": "Hvidovre",
        "postalCode": "2650",
        "countryCode": "DK"
      }
    },
    "event": {
      "code": "R",
      "extendedCode": "",
      "description": "Mis en Livraison"
    },
    "ssccs": ["00335958250047964662"]
  }]
}, {
  "id": "A2820280876091990016",
  "shipmentDate": "2021-10-28",
  "forwarder": {
    "id": "250",
    "partnerGLN": "4046823000007",
    "names": ["DACHSER Denmark A/S Logistics Centre Copenhagen"],
    "addressInformation": {
      "city": "Hvidovre",
      "postalCode": "2650",
      "countryCode": "DK"
    }
  },
  "shipmentWeight": {
    "weight": 861.59,
    "unit": "kg"
  },
  "portOfDeparture": "MUC",
  "portOfDestination": "CGC",
  "consignor": {
    "id": "68779302",
    "partnerGLN": "8588788490809",
    "names": ["Ernie & Bert"],
    "addressInformation": {
      "streets": ["Sesamstraße 9b"],
      "city": "Köln",
      "postalCode": "50997",
      "countryCode": "DE"
    }
  },
  "consignee": {
    "id": "21269784",
    "partnerGLN": "8340338594266",
    "names": ["Daisy Duck"],
    "addressInformation": {
      "streets": ["Boulevard de Parc 12"],
      "city": "Coupvray",
      "postalCode": "77700",
      "countryCode": "FR"
    }
  },
  "references": [{
    "code": "003",
    "value": "q9Fa6SXXFr"
  }, {
    "code": "007",
    "value": "FuEegxLYOv"
  }, {
    "code": "HAW",
    "value": "niw37194349"
  }],
  "status": [{
    "statusSequence": 1,
    "id": "45310828399",
    "statusDate": "2021-10-26T11:33:00",
    "eventSetter": {
      "id": "250",
      "partnerGLN": "4046823000007",
      "names": ["DACHSER Denmark A/S Logistics Centre Copenhagen"],
      "addressInformation": {
        "city": "Hvidovre",
        "postalCode": "2650",
        "countryCode": "DK"
      }
    },
    "event": {
      "code": "R",
      "extendedCode": "",
      "description": "Mis en Livraison"
    }
  }]
}];

$('#myTable').DataTable({
  data: data,
    columns: [
        { data: 'id' },
        { data: 'shipmentDate' },
        { data: 'forwarder.id' },
        { data: 'forwarder.partnerGLN' },
        { data: 'forwarder.names' },
        { data: 'forwarder.addressInformation.city' },
        { data: 'forwarder.addressInformation.postalCode' },
        { data: 'forwarder.addressInformation.countryCode' },
        { data: 'shipmentWeight.weight' },
        { data: 'shipmentWeight.unit' },
        { data: 'consignor.id' },
        { data: 'consignor.partnerGLN' },
        { data: 'consignor.names' }
        
        ]

});
    <link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>


<table id="myTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>shipmentDate</th>
                <th>forwarder.id</th>
                <th>forwarder.partnerGLN</th>
                <th>forwarder.names</th>
                <th>forwarder.addressInformation.city</th>
                <th>forwarder.addressInformation.postalCode</th>
                <th>forwarder.addressInformation.countryCode</th>
                <th>weight</th>
                <th>unit</th>
                <th>consignor.id</th>
                <th>consignor.partnerGLN</th>
                <th>consignor.names</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
</table>

    【讨论】：

      猜你喜欢
      • 2019-07-09
      • 2016-10-06
      • 2021-12-27
      • 2021-09-05
      • 1970-01-01
      • 1970-01-01
      • 2015-08-17
      • 2021-07-14
      • 2021-10-19
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode