when assigning JSON data, not an array error in angularjs

Question

This is my JSON data format.

{
"0": {
    "id": "1",
    "image": "/images/brands/surf_excel.png",
    "name": "Surf Excel",
    "productCount": "6"
},
"1": {
    "id": "2",
    "image": "/images/brands/rin.png",
    "name": "Rin",
    "productCount": "5"
},
"2": {
    "id": "3",
    "image": "/images/brands/ariel.png",
    "name": "Ariel",
    "productCount": "4"
}
}

When i am trying to assign this data like this..

$scope.Brands = [];
$scope.Brands = data; // Not an array error

Basically i want to assign data and access one by one.

How to fix this error?

your data is NOT an array, hence the error

Jaromanda X
– Jaromanda X

2016-08-14 04:40:13 +00:00
Commented Aug 14, 2016 at 4:40 — Jaromanda X
– Jaromanda X, Commented Aug 14, 2016 at 4:40

Hadi · Accepted Answer · 2016-08-14 04:36:54Z

2

You can use loop for this

  angular.forEach(data,function(value,key){
   $scope.Brands.push(value);
  })

answered Aug 14, 2016 at 4:36

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

Comments

Raman Sahasi · Accepted Answer · 2016-08-14 05:27:15Z

Always remember, Whenever there's an array, it would be surrounded by square brackets [ ].

Now you can see why your JSON data doesn't contain any array. Instead of just assigning JSON's data directly to $scope.Brands, you can push the values like this:

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

app.controller('MainCtrl', function($scope) {
  var data = JSON.parse('{"0":{"id":"1","image":"/images/brands/surf_excel.png","name":"Surf Excel","productCount":"6"},"1":{"id":"2","image":"/images/brands/rin.png","name":"Rin","productCount":"5"},"2":{"id":"3","image":"/images/brands/ariel.png","name":"Ariel","productCount":"4"}}');
  $scope.name = 'World';
  
  $scope.Brands = [];
  
  angular.forEach(data,function(value,key){
   $scope.Brands.push(value);
  })
  
  document.write("<pre>" + JSON.stringify($scope.Brands, 0, 8) + "</pre>");
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl"></body>

</html>

Now when you run this snippet, you'll see the data surrounded by [ and ]. This indicates that it's an array.

KumarM · Accepted Answer · 2016-08-14 04:47:35Z

0

Given you are using angular, @SSH has already given the best answer. Another way to solve this is (non angular):

var brands = new Array();

//Get the keys and iterate through them and add each entry
Object.keys(data).forEach(function(key){
    brands.push(data[key]);
});

answered Aug 14, 2016 at 4:47

KumarM

1,6991 gold badge18 silver badges26 bronze badges

Collectives™ on Stack Overflow

when assigning JSON data, not an array error in angularjs

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related