How to show json inside another array in bootstrap table

Question

I have to the below JSON data in a bootstrap table. I can show the one level data, but I don't know how to show array inside array data in bootstrap table.

[
    {
        "seriesName": "Indian Bank",
        "dataVlaues": {
            "11/12/2017": 50,
            "11/13/2017": 40,
            "11/14/2017": 60,
            "11/11/2017": 100
        }
    },
    {
        "seriesName": "Indian Bank1",
        "dataVlaues": {
            "11/18/2017": 12,
            "11/17/2017": 27,
            "11/16/2017": 30,
            "11/15/2017": 101
        }
    }
]

i tried in ul and li but i required in bootstrap table jsfiddle — Charankumar Mysore
– Charankumar Mysore, Commented Nov 17, 2017 at 9:16
Can you elaborate on your question, it is not clear what you are requesting, also I don't see an array inside an array in your code. — M0nst3R
– M0nst3R, Commented Nov 17, 2017 at 9:26
i want to show the dataVlaues both the key and value in bootstrap table — Charankumar Mysore
– Charankumar Mysore, Commented Nov 17, 2017 at 9:28
Please include an example of how you show the one level JSON data in a bootstrap table and explain how do you expect the nested array to look like in the new table. — M0nst3R
– M0nst3R, Commented Nov 17, 2017 at 9:40

Vipin Kumar · Accepted Answer · 2017-11-17 09:59:35Z

Please find working solution below, enjoy :)

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {

    $scope.userTypes = [{
      "type": 'Parent',
      "options": {
        "option1": "11QWERT",
        "option2": "22QWERT"
      }
    }, {
      "type": 'Parent1',
      "options": {
        "option22": "11QWERT",
        "option222": "22QWERT"
      }
    }];
  })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Type</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="user in userTypes">
          <td>{{user.type}}</td>
          <td>
            <button ng-click="showOptions = !showOptions" class="btn btn-xs btn-primary">
              Show
            </button>
          </td>
        </tr>
        <tr ng-repeat-end ng-if="showOptions">
          <td colspan="2">
            <table class="table table-bordered">
              <tbody>
                <tr ng-repeat="(key, val) in user.options">
                  <td>{{key}}</td>
                  <td>{{val}}</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Lalit Sachdeva · Accepted Answer · 2017-11-17 09:56:56Z

Please check this jsfiddle link

https://jsfiddle.net/lalitSachdeva1/0xb732e1/1/

I have updated the ul li to table like structure; your js will remain same and the key concept here is ng-repeat-start and ng-repeat-end

<div ng-app="myApp">
    <div ng-controller="myCtrl">
      <table>
    <thead>
        <tr>
            <td>parent</td>
            <td>option1</td>
            <td>option2</td>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="user in userTypes">
            <td>{{user.type}}</td>
            <td ng-repeat-start="(key,value) in user.options">{{key}}</td>
            <td ng-repeat-end="(key,value) in user.options">{{value}}</td>
        </tr>
    </tbody>
</table>
    </div>
</div>

Collectives™ on Stack Overflow

How to show json inside another array in bootstrap table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related