CODEWITHSUNDEEP
angularjs
pjordanna
pjordanna

Reputation: 35

ng-repeat on Two Separate Arrays In JSON File Angular JS

I have a problem that I'm sure has a simple solution but I can't find it. I have a JSON file with three separate arrays in it. Websites1, Websites2 and Websites3. I'm retrieving this via an app.controller and need to use ng-repeat to generate the options in 3 separate select lists. Rather than creating 3 app.controller instances it made sense to me to create one at the form level with 3 arrays in it and then use ng-repeat 3 times to get the relevant values each time, but I can't work out how to retrieve the values using ng-repeat. The JSON I have is as follows:

[
  {
"Websites1": [
  {
    "0": "1",
    "ID": "1",
    "1": "Value 1",
    "WebsiteName": "Value 1",
    "2": "EI",
    "WebsiteCode": "EI"
  },
  {
    "0": "2",
    "ID": "2",
    "1": "Value 2",
    "WebsiteName": "Value 2",
    "2": "IC",
    "WebsiteCode": "IC"
  },
  {
    "0": "3",
    "ID": "3",
    "1": "Value 3",
    "WebsiteName": "Value 3",
    "2": "SO",
    "WebsiteCode": "SO"
  }
]
},
{
"Websites2": [
  {
    "0": "1",
    "ID": "1",
    "1": "Value 1a",
    "WebsiteName": "Value 1a",
    "2": "EI",
    "WebsiteCode": "EI"
  },
  {
    "0": "2",
    "ID": "2",
    "1": "Value 2a",
    "WebsiteName": "Value 2a",
    "2": "IC",
    "WebsiteCode": "IC"
  },
  {
    "0": "3",
    "ID": "3",
    "1": "Value 3a",
    "WebsiteName": "Value 3a",
    "2": "SO",
    "WebsiteCode": "SO"
  }
]
},
{
"Websites3": [
  {
    "0": "1",
    "ID": "1",
    "1": "Value 1a",
    "WebsiteName": "Value 1a",
    "2": "EI",
    "WebsiteCode": "EI"
},
  {
    "0": "2",
    "ID": "2",
    "1": "Value 2a",
    "WebsiteName": "Value 2a",
    "2": "IC",
    "WebsiteCode": "IC"
  },
  {
    "0": "3",
    "ID": "3",
    "1": "Value 3a",
    "WebsiteName": "Value 3a",
    "2": "SO",
    "WebsiteCode": "SO"
  }
]
} 
]

And the controller:

app.controller('FormController', [ '$http', function($http) {

var form = this;
form.json = [];

var config = {
    params: {
        command: 'banner.json.form.website',
        ajax: 'true'
    }
}    

$http.get('https://api.myjson.com/bins/o9r47', config).success(function(data) {

  console.log(data);
  form.json = data;

}).error(function(data) {

  console.log('error');

});
}]);

All good there and the JSON is being returned correctly. Here's the ng-repeat:

<div ng-controller="FormController as form" class="portlet-body form">
<select class="form-control select2">
<option ng-repeat="json in form.json.Websites" value="{{json.WebsiteCode}}">{{json.WebsiteName}}</option>
</select>
</div>

If I use a JSON object with only top level data then this works:

<div ng-controller="FormController as form" class="portlet-body form">
<select class="form-control select2">
<option ng-repeat="json in form.json" value="{{json.WebsiteCode}}">{{json.WebsiteName}}</option>
</select>
</div>

But I can't figure out how to pull the data from an array within the JSON object. Can somebody please help?

Thanks!

Upvotes: 0

Views: 548

Answers (1)

Pengyy
Pengyy

Reputation: 38171

Since you have nested Array to display, you could try with nested ng-repeat.

And the second layer is object, here is a trick to read data based on $index: site['Websites' + ($index + 1)].

refer the code snippet below:

angular.module("app", [])
  .controller('FormController', ['$http', function($scope) {
    var form = this;

    form.json = [{
        "Websites1": [{
            "0": "1",
            "ID": "1",
            "1": "Value 1",
            "WebsiteName": "Value 1",
            "2": "EI",
            "WebsiteCode": "EI"
          },
          {
            "0": "2",
            "ID": "2",
            "1": "Value 2",
            "WebsiteName": "Value 2",
            "2": "IC",
            "WebsiteCode": "IC"
          },
          {
            "0": "3",
            "ID": "3",
            "1": "Value 3",
            "WebsiteName": "Value 3",
            "2": "SO",
            "WebsiteCode": "SO"
          }
        ]
      },
      {
        "Websites2": [{
            "0": "1",
            "ID": "1",
            "1": "Value 1a",
            "WebsiteName": "Value 1a",
            "2": "EI",
            "WebsiteCode": "EI"
          },
          {
            "0": "2",
            "ID": "2",
            "1": "Value 2a",
            "WebsiteName": "Value 2a",
            "2": "IC",
            "WebsiteCode": "IC"
          },
          {
            "0": "3",
            "ID": "3",
            "1": "Value 3a",
            "WebsiteName": "Value 3a",
            "2": "SO",
            "WebsiteCode": "SO"
          }
        ]
      },
      {
        "Websites3": [{
            "0": "1",
            "ID": "1",
            "1": "Value 1a",
            "WebsiteName": "Value 1a",
            "2": "EI",
            "WebsiteCode": "EI"
          },
          {
            "0": "2",
            "ID": "2",
            "1": "Value 2a",
            "WebsiteName": "Value 2a",
            "2": "IC",
            "WebsiteCode": "IC"
          },
          {
            "0": "3",
            "ID": "3",
            "1": "Value 3a",
            "WebsiteName": "Value 3a",
            "2": "SO",
            "WebsiteCode": "SO"
          }
        ]
      }
    ];


  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="FormController as form" class="portlet-body form">

  <select class="form-control select2" ng-repeat="site in  form.json">
    <option ng-repeat="item in site['Websites' + ($index + 1)]" value="{{item.WebsiteName}}">{{item.WebsiteName}}</option>
  </select>
</div>

Upvotes: 1

Related Questions