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

Question

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!

Please confirm that you receive your data wrapped into single array element, so [ & ] brackets around your example isn't a mistake. — Vladyslav
– Vladyslav, Commented Apr 21, 2017 at 9:47

Pengyy · Accepted Answer · 2017-04-21 10:07:16Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related