How to display array of JSON objects in a table

Question

I have a JSON array of objects, which I want to dispaly all of it into a table, but somewhere I'm messing up with something.

Problem Statement: Display JSON array of nested objects in a table including all of its contents.

JSON Data:

{
"loadStops": [{
    "id": 1,
    "sequence": 1,
    "type": "P",
    "stop": {
        "companyId": 148,
        "companyCode": "FWS",
        "legalName": "Frontier WHSE",
        "locations": [{
            "id": 149,
            "city": "PortLavaca",
            "state": "TX",
            "contacts": [{
                "id": 150,
                "medium": "MA",
                "serviceLocator": "000-000-0000",
                "prefered": false,
                "action": 0
            }],
            "action": 0
        }],
        "action": 0
    },
    "apptType": "WDO",
    "appointmentNo": null,
    "commodities": [{
        "id": 0,
        "commodity": "Food",
        "action": 0
    }],
    "action": 0
}, {
    "id": 1,
    "sequence": 1,
    "type": "P",
    "stop": {
        "companyId": 148,
        "companyCode": "FWS",
        "legalName": "Frontier WHSE",
        "locations": [{
            "id": 149,
            "city": "PortLavaca",
            "state": "TX",
            "contacts": [{
                "id": 150,
                "medium": "MA",
                "serviceLocator": "000-000-0000",
                "prefered": false,
                "action": 0
            }],
            "action": 0
        }],
        "action": 0
    },
    "apptType": "WDO",
    "appointmentNo": null,
    "commodities": [{
        "id": 0,
        "commodity": "Food",
        "action": 0
    }],
    "action": 0

}]

}

Please guide me how do I write the code for bootstrap table to achieve all the contents inside the table.

TABLE:

<table class="table table-striped table-hover table-sm">
            <tr>
                <th>headers</th>
            </tr>

            <tr>
                <td> data </td>
                <td>
                    <table>
                        <tr>
                            <td> nested data etc.. </td>
                        </tr>
                    </table>
                </td>
            </tr>


        </table>

Please enlighten my misunderstanding, I'll be thankful to you. Thanks

Do want to show entire JSON as it is into a table? What do you mean by "all of it"? — Anand G
– Anand G, Commented Feb 23, 2018 at 8:50
@Mawg yes I know about ng-repeat, but it shows one data cell multiple times... — Sikandar Sahab
– Sikandar Sahab, Commented Feb 23, 2018 at 8:51
@AnandG Yes I want all of the information, we may exclude actions and ids. — Sikandar Sahab
– Sikandar Sahab, Commented Feb 23, 2018 at 8:51
ngFor if for Angular, not AngularJS. Angular is another, different framework. You ned ng-repeat, and you need to nest ng-repeat inside ng-repeat, just like you would nest for loops in any programming language to loop through an array contained in another array. Show what you tried. We won't do your homework. — JB Nizet
– JB Nizet, Commented Feb 23, 2018 at 8:59

Bimlendu Kumar · Accepted Answer · 2018-02-23 16:01:20Z

1

      I am just giivng a sample to iterate over nested data:
      $scope.value= yourJson;
      $spope.displayVal= $scope.value.loadStops;
      <table class="table table-striped table-hover table-sm">
            <tr ng-repeat="data in displayVal">
                <th>{{data.id}}</th>
                <!-- show data what you want-->
            </tr>

            <tr ng-repeat="data in displayVal">
                <td> data </td>
                <td>
                    <table>
                        <tr ng-repeat="newData in data.stop.location">
                            <td> nested data etc.. </td>
                        </tr>
                    </table>
                </td>
            </tr>


        </table>

answered Feb 23, 2018 at 16:01

Bimlendu Kumar

3462 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display array of JSON objects in a table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related