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

That does not look like a valid JSON string.

Bishal
– Bishal

2018-11-20 02:39:37 +00:00
Commented Nov 20, 2018 at 2:39 — Bishal
– Bishal, Commented Nov 20, 2018 at 2:39
post your actual JSON also not console one.

Shiv Kumar Baghel
– Shiv Kumar Baghel

2018-11-20 02:40:38 +00:00
Commented Nov 20, 2018 at 2:40 — Shiv Kumar Baghel
– Shiv Kumar Baghel, Commented Nov 20, 2018 at 2:40
@ShivKumarBaghel Updated the json

seth
– seth

2018-11-20 02:44:39 +00:00
Commented Nov 20, 2018 at 2:44 — seth
– seth, Commented Nov 20, 2018 at 2:44
@Bishal JSon Updated to make more sense

seth
– seth

2018-11-20 03:00:56 +00:00
Commented Nov 20, 2018 at 3:00 — seth
– seth, Commented Nov 20, 2018 at 3:00

Shiv Kumar Baghel · Accepted Answer · 2018-11-20 03:04:35Z

1

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>

answered Nov 20, 2018 at 3:04

Shiv Kumar Baghel

2,4906 gold badges20 silver badges36 bronze badges

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

2 Comments

charlietfl Over a year ago

Should provide an explanation of what is different and why it solves OP's issue. "try this" is meaningless and therefore people have to sniff out and try to compare differences

seth Over a year ago

@Shiv Kumar Baghel Thank you so much this worked. I guess my problem was I did not how to take a inner array and try to make into ng repeat. This was really helpfull. The only thing I am confuse is " <td ng-repeat=" itm in item.parts">{{itm}}</td>" why are we using the item.parts rather than schdule.parts ? Thank you

Sukanya Pai · Accepted Answer · 2018-11-20 11:16:42Z

0

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.

answered Nov 20, 2018 at 11:16

Sukanya Pai

8841 gold badge11 silver badges27 bronze badges

3 Comments

seth Over a year ago

That was not the mistake well short of. I did forgot to put {{}}(binding properly) What I did not do was to get inner array of json. I did not know how to look for inner array. Thank you

Sukanya Pai Over a year ago

Oh, alright. Here is a link which helps to understand how to read/access json objects: aspsnippets.com/Articles/… Hope it helps!

seth Over a year ago

Thank you that was very helpfull. I am trying to learn how to read nested array in angularjs. That will help me out thank you

Collectives™ on Stack Overflow

Reading Json in angularjs

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related