Flattening a Nested JSON and output to HTML Table

by

i have this JSON string coming from the DACHSER API system :

{"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"}}]}]}

and, using javascript, this is the expected output i would like to get. As you can see the JSON levels are all concatenated in the table headers.
I can add more details if necessary, please ask in comments.
Actualy all examples found in stackoverflow are not doing it as i’m expecting.

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="nofollow noreferrer noopener" 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>
Contents hide
Answers:
Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I found how to handle this using datatables.net in this JSFiddle
But it is not a very nice way to do it as i have to manualy create the rows in the HTML part, also in the JS part. a way to automaticaly create the headers and fill the rows would be better.
So to get it working i have to modify the JSON by removing this {“shipments”: and the latest }

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="nofollow noreferrer noopener" 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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x