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

Answer 1

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>

Answer 2

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>