Angular.js - Nested JSON scope with Angular

Question

{
  "imports": {
    "imported": [
      {
        "date": "19/9/2014",
        "item": [
          {
            "sn": "3366698",
            "type": "Food",
            "weight": "10tn."
          },
          {
            "sn": "3366699",
            "type": "Eqipment",
            "weight": "20kg."
          }
        ]
      },
      {
        "date": "20/9/2014",
        "item": [
          {
            "sn": "3366700",
            "type": "Electronics",
            "weight": "100pt."
          },
          {
            "sn": "3366701",
            "type": "Food",
            "weight": "5tn."
          }
        ]
      }
    ]
  }
}

I have this json and I am not sure if it's in the right structure. I am trying to render each item type (duplicates included) as table header by the following $.getJSON method:

$scope.items = data.imports.item;

and HTML as:

<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>

But I couldn't succeed. What am I doing wrong?

EDIT: jsfiddler

score 0 · Answer 1 · answered Sep 23 '14 at 13:23

0

I don't see you are using the imported propery at all, try

$scope.items = data.imports.imported;

since imported is your array and not item.

<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>

answered Sep 23 '14 at 13:23

pedrommuller

15,741
10
76
126

score 0 · Answer 2 · answered Sep 23 '14 at 13:24

0

Your json ist broken, paste your json here: http://jsonformatter.curiousconcept.com/

You'll see that data.imports.item would be undefined.

Correct JSON to access would look like:

{
  "imports": {

        "item": [
          {
            "sn": "3366698",
            "type": "Food",
            "weight": "10tn."
          },
          {
            "sn": "3366699",
            "type": "Eqipment",
            "weight": "20kg."
          }
        ]
      }
}

Also access your data after:

<th ng-repeat="item in items">
{{item["type"]}}
</th>

answered Sep 23 '14 at 13:24

graphefruit

364
4
15

so where can I add imported date? – Litestone Sep 23 '14 at 13:34
1

You could try to nest your ng-repeat: {{obj["date"]}} {{item["type"] }} Reference to here: http://stackoverflow.com/questions/21161922/accessing-the-nested-arrays-using-ng-repeat-in-angularjs – graphefruit Sep 23 '14 at 13:49
I think I am getting closer – Litestone Sep 23 '14 at 13:57

Angular.js - Nested JSON scope with Angular

2 Answers2