JSON Angular Array pulling data from 3rd Loop

Question

I am struggling to pull the data from the 3rd loop (Names) in the array below.

Any idea what i am doing wrong?

sample.json

{
  "otc": [
    {
      "name": "Tums",
      "language": [
        {
          "title": "English",
          "names": [
            {"name": "Tums"},
            {"name": "Pepto"}
          ]
        },
        {
          "title": "China"
        },
        {
          "title": "Germany"
        }
        ,
        {
          "title": "Mexico"
        }
        ,
        {
          "title": "India"
        }
        ,
        {
          "title": "United Kingdom"
        }
      ]
    },
    {
      "name": "Dramamine",
      "language": [
        {
          "title": "title2album1"

        },
        {
          "title": "title2album2"
        },
        {
          "title": "title2album3"
        }
      ]
    }
  ]
}

And this is my index.html

<body ng-app="list">

  <div ng-controller="ListCtrl">
   <ul>
    <li ng-repeat-start="meds in otc">
      <strong> {{meds.name}}</strong> //This displays just fine 
    </li>
    <li ng-repeat="lang in meds.language"><em>{{lang.title}}</em></li> //This displays just fine

    <li ng-repeat-end ng-repeat="drugs in lang.names">{{drugs.name}}</li> //This doesnt display
  </ul>
  </div>

  <script>
  angular.module('list', []);
    function ListCtrl($scope, $http) {
      $http({method: 'GET', url: 'sample.json'}).success(function(data) {
          $scope.otc = [];
          angular.forEach(data.otc, function(value, key) {
              $scope.otc.push(value);
          });
          $scope.isVisible = function(name){
              return true;
          };
        });
    }
  </script>

jCuga · Accepted Answer · 2014-07-09 21:39:00Z

3

It looks like your JSON data is a bit incomplete, since you're missing the names key in all of the language objects except for the English one.

Beyond that, your html/angular-view code is a bit off. The ng-repeat's should be nested inside of one-another. This is done by having the opening/closing html tags that contain the ng-repeat directive completely surround the inner <li> tags.

It's a bit hard to tell, but if you want nested lists, you need to add <ul> tags like in my example below.

I believe your index html should look something like:

  <ul>
    <li ng-repeat="meds in otc">
      <strong> {{meds.name}}</strong> //This displays just fine 
      <ul>
          <li ng-repeat="lang in meds.language">
                <em>{{lang.title}}</em>
                <ul>
                    <li ng-repeat="drugs in lang.names">{{drugs.name}}</li>
                </ul>
          </li>
      </ul>
    </li>
  </ul>

The reason why the li ng-repeat tags should be nested is because ng-repeat creates its own isolate scope. Which means that inside of an ng-repeat tag, it only has access to the data made available by the ng-repeat="data in datar" part.

So having:

<li ng-repeat="lang in meds.language"><em>{{lang.title}}</em></li> //This displays just fine
<li ng-repeat="drugs in lang.names">{{drugs.name}}</li> //This doesnt display

as sibling elements, and not the second as a child of the other, the 2nd ng-repeat list does not know what the var lang is. So the drugs in lang.names fails.

Btw, this snippet assumes that the output you want is:

Tums
- English
  - Tums
  - Pepto
- China
- Germany
- etc
Dramamine
- title2album1
- title2album2
- etc

If you wanted the output as a flat list, you can use the following CSS

ul ul {
    padding: 0;
    margin: 0;
    list-style-type: disc;
}

edited Jul 9, 2014 at 21:39

answered Jul 9, 2014 at 21:25

jCuga

1,5534 gold badges16 silver badges28 bronze badges

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

2 Comments

Pete Over a year ago

I like your approach, however, maybe add some CSS code to get the list looking like it was a non-nested list to get the output to look like @Travis original HTML. You won't need the ng-repeat-start or ng-repeat-end in your case either, you can just use ng-repeat and it keeps everything nice and simple.

Travis Over a year ago

Exactly what i was looking for i had no idea that they needed to be nested like that for them to know what the other had going on LOL :) Cheers much appreciated

Collectives™ on Stack Overflow

JSON Angular Array pulling data from 3rd Loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related