Reading Json in angularjs

Question

  {
  "days": [
    {
      "day": "2018-11-25T00:00:00",
      "entries": [
        {
          "name": "D",
          "value": 1,
          "parts": [
            "EG"
          ]
        },
        {
          "name": "S",
          "value": 0,
          "parts": []
        },
        {
          "name": "J",
          "value": 2,
          "parts": []
        },
        {
          "name": "S",
          "value": 1,
          "parts": [
            "Lead"
          ]
        },
        {
          "name": "W",
          "value": 1,
          "parts": [
            "Melody"
          ]
        },
        {
          "name": "Jen C",
          "value": 1,
          "parts": [
            "Melody"
          ]
        },
        {
          "name": "T",
          "value": 2,
          "parts": []
        },
        {
          "name": "B",
          "value": 2,
          "parts": []
        },
        {
          "name": "B",
          "value": 1,
          "parts": [
            "Melody"
          ]
        },
        {
          "name": "R",
          "value": 0,
          "parts": []
        },
        {
          "name": "B",
          "value": 1,
          "parts": [
            "AG"
          ]
        },
        {
          "name": "S",
          "value": 0,
          "parts": []
        },
        {
          "name": "N",
          "value": 2,
          "parts": []
        },
        {
          "name": "J",
          "value": 2,
          "parts": []
        },
        {
          "name": "S",
          "value": 1,
          "parts": [
            "2nd"
          ]
        }
      ]
    }

Hello,

I am getting Json like this style. This is what I am using to display the json object.

<table class="table">
  <thead>
    <tr>
      <th ng-repeat=" x in schedule" scope="col">{x.day}</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th ng-repeat=" x in schedule" scope="row">{x.name}</th>
      <td>{x.parts}</td>
    </tr>
  </tbody>
</table>

But this seems not to work. Its giving me error and does not bind any data at all in the table. I even try to watch "watch window" but I do not know how to display everything in table. Any help will really be appreciated. I am doing this in angularjs. Thank you

Answer 1

The mistake is in the binding. You need to use double curly markup binding like {{x.day}}, {{x.name}} etc. Please refer this link for more information.

Answer 2

try below code snippet.

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

$scope.schedule = {
  "days": [
    {
      "day": "2018-11-25T00:00:00",
      "entries": [
        {
          "name": "D",
          "value": 1,
          "parts": [
            "EG"
          ]
        },
        {
          "name": "S",
          "value": 0,
          "parts": []
        },
        {
          "name": "J",
          "value": 2,
          "parts": []
        },
        {
          "name": "S",
          "value": 1,
          "parts": [
            "Lead"
          ]
        },
        {
          "name": "W",
          "value": 1,
          "parts": [
            "Melody"
          ]
        },
        {
          "name": "Jen C",
          "value": 1,
          "parts": [
            "Melody"
          ]
        },
        {
          "name": "T",
          "value": 2,
          "parts": []
        },
        {
          "name": "B",
          "value": 2,
          "parts": []
        },
        {
          "name": "B",
          "value": 1,
          "parts": [
            "Melody"
          ]
        },
        {
          "name": "R",
          "value": 0,
          "parts": []
        },
        {
          "name": "B",
          "value": 1,
          "parts": [
            "AG"
          ]
        },
        {
          "name": "S",
          "value": 0,
          "parts": []
        },
        {
          "name": "N",
          "value": 2,
          "parts": []
        },
        {
          "name": "J",
          "value": 2,
          "parts": []
        },
        {
          "name": "S",
          "value": 1,
          "parts": [
            "2nd"
          ]
        }
      ]
    }
  ]
};

}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="MyCtrl">
    <table class="table" border=1>
      <thead>
        <tr>
          <th ng-repeat=" x in schedule.days" scope="col">{{x.day}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat=" item in schedule.days[0].entries" scope="row">
          <td>{{item.name}}</td>
          <td ng-repeat=" itm in item.parts">{{itm}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>