AngularJS ng-repeat displays two dimensional array from Json

Question

Here is html file, I want to show 2D array from json-$scope.listOfIngredient

  <div class="ingredientMapping" ng-repeat="IngredientMapping in listOfIngredient track by $index">

      <ul>
        <!-- BEGIN: Inner ngRepeat. -->
        <li  ng-repeat="x in IngredientMapping.Ingredient">

            {{x.name}}

        </li>
        <!-- END: Inner ngRepeat. -->
    </ul>
      </div>

here is my Controller.js

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

myApp.controller('mainController',function ($scope, $http) {

$scope.listOfRecipe = null;
    var url = "http://164.132.196.117/chop_dev/recipe/recipes.json";
    var url2 = "http://164.132.196.117/chop_dev/recipe/recipes/view/";
$http({
method: 'GET',
url: url

}).then(function (response) {
         $scope.listOfRecipe = response.data.recipes;

         var temp;
         for(var i=0; i<response.data.recipes.length;i++){
             $http({
                        method: 'GET',
                        url: url2+ response.data.recipes[i].Recipe.id +".json"
                    }).then(function (response2) {

                        $scope.listOfIngredient = new Array(100);
                        for (var j = 0 ;j<100;j++)
                        {
                            $scope.listOfIngredient[i] = new Array(100);
                        }
                        for (var j = 0 ;j<response2.data.recipe.IngredientMapping.length;j++)
                        {
                            $scope.listOfIngredient[i][j] = response2.data.recipe.IngredientMapping[i];
                        }

                        console.log($scope.listOfIngredient);

                    });
         }



     })

Here is my Json file http://164.132.196.117/chop_dev/recipe/recipes/view/id.json

here is error when I implement it and I know this error is from      $scope.listOfIngredient[i][j] = response2.data.recipe.IngredientMapping,

I got confused if it is correct to get 2d array like this way

So what is the issue here? are you unable to display the 2D array? — AranS
– AranS, Commented Jul 31, 2016 at 13:07
the issue is that I can not show the list of ingredient with a certain recipe id on broswer — Agnes
– Agnes, Commented Jul 31, 2016 at 13:23
I'm not sure I understand. You currently have a hard-coded url from which you get a JSON representing recipies and their ingredients. You are able to display them in your console. Can you elaborate on the issue? — AranS
– AranS, Commented Jul 31, 2016 at 13:26
I got all recipes from 164.132.196.117/chop_dev/recipe/recipes.json, — Agnes
– Agnes, Commented Jul 31, 2016 at 14:36
I got all recipes from 164.132.196.117/chop_dev/recipe/recipes.json,now I need to display a list of ingredients of each recipe on browser , the ingredients data of each recipe is in 164.132.196.117/chop_dev/recipe/recipes/view/id.json, "id" is recipe id. At moment, I can get 2d array of ingredient in javascript(can be displayed on console), but it would not be able to be showed on browser(I guess something is wrong in my html , I checked my mapping is ok ) — Agnes
– Agnes, Commented Jul 31, 2016 at 14:44

DavidP · Accepted Answer · 2016-08-02 12:38:11Z

1

It seems as if your mapping is off. This works for me:

<div ng-controller="MyCtrl">
  <div class="ingredientMapping" ng-repeat="recipes in listOfIngredient">
    <ul>
      <li  ng-repeat="x in recipes.recipe.IngredientMapping">
        {{x.Ingredient.name}}
      </li>
    </ul>
  </div>
</div>

http://jsfiddle.net/Lvc0u55v/7841/

Edit:

so:

<li ng-repeat="x in recipes.recipe.IngredientMapping"> instead of

<li ng-repeat="x in IngredientMapping.Ingredient">

and:

{{x.Ingredient.name}} instead of

{{x.name}}

edited Aug 2, 2016 at 12:38

answered Jul 31, 2016 at 13:53

DavidP

2,0581 gold badge17 silver badges24 bronze badges

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

7 Comments

Agnes Over a year ago

Yes ,I did as you said and my mapping is ok, but still doesn't work

Agnes Over a year ago

<div ng-app="myApp" ng-controller="mainController" class="center"> <div class="ingredientMapping" ng-repeat="recipes in listOfIngredient track by $index"><ul>  <li ng-repeat="x in recipes.Recipe.IngredientMapping"> {{x.Ingredient.name}} </li>  </ul>

DavidP Over a year ago

Either remove the track by $index snippet, or make sure you are running Angular 1.2 as a minimum.

DavidP Over a year ago

When you say, "it still does not work" - are there any errors in your console?

Agnes Over a year ago

if I remove the track by $index snippet, it will show errors angular.js:12520 Error: [ngRepeat:dupes] errors.angularjs.org/1.4.8/ngRepeat/… at Error (native) at ajax.googleapis.com/ajax/libs/angularjs/1.4.8/… at ajax.googleapis.com/ajax/libs/angularjs/1.4.8/… at Object.fn (ajax.googleapis.com/ajax/libs/angularjs/1.4.8/…)

|

Collectives™ on Stack Overflow

AngularJS ng-repeat displays two dimensional array from Json

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related