how to loop through array of json objects in angularjs

Question

I have a auto search module with below json structure. I need to loop through aray of json objects and use key and value as per requirements.

I have tried below code. But with provided json object, I am able to retrieve key, but not value.

lets say, for firt, Json object, I need to retrieve 'Product Apple'., but I`m getting only link.

I tried response.data[key][0] ,but getting full json object. May I Know where I have done wrong.

I have updated plunker below

[{
    "/folder1/folder2/folder3/product-1": "Product Apple"
  },
  {
    "/folder1/folder2/folder3/product-2": "Product samsung"
  },
  {
    "/folder1/folder2/folder3/product-3": "Product lenovo"
  },
  {
    "/folder1/folder2/folder3/product-4": "Product Asus"
  },
  {
    "/folder1/folder2/folder3/product-5": "Product Acer"
  },
  {
    "/folder1/folder2/folder3/product-6": "Product Vivo"
  },
  {
    "/folder1/folder2/folder3/product-7": "Product Oppo"
  }
]

code here

Possible duplicate of [How do I loop through or enumerate a JavaScript object?](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) — Randy Casburn, May 14 '18 at 17:25
code was added to plnkr.. http://plnkr.co/edit/0FAygzd9AqnHg5RVgR8j?p=preview — shabarinath, May 14 '18 at 17:26
your data-structure is ... improvable. The following snippets convert it into a better one: at least `Object.assign({}, ...array)` better `Object.entries(Object.assign({}, ...array))` or maybe `Object.entries(Object.assign({}, ...array)).map(([path, label]) => ({ path, label }))` — Thomas, May 14 '18 at 17:33

shabarinath · Answer 1 · 2018-05-15T06:51:04.270

0

Since this is marked as duplicate post., I have gone through the provided solution and found that the duplicate post has solution via javascript. But I`m looking to iterate through angularjs 'ng-repeat'.

Please find plunker below for solution I have got

[code here][1]

code here

edited May 15 '18 at 06:51

answered May 15 '18 at 06:45

shabarinath

548
3
18

Hi, Iam able to get the values I need. However after selecting the product, I need to send the URL respective to that product to a variable name. I have passed the selected text to controller. Now I have to search through json obj matching the text and get the respective url and assign it to a variable. Can you help me out how to do it. plnkr here: http://plnkr.co/edit/0FAygzd9AqnHg5RVgR8j?p=preview – shabarinath May 15 '18 at 09:44

score -1 · Answer 2 · answered May 14 '18 at 17:26

You probably want to assign that structure to a variable, and then run an *ngFor on it, like this:

// in the component file
let results = [ 
   {  
      "/folder1/folder2/folder3/product-1":"Product Apple"
   },
   {  
      "/folder1/folder2/folder3/product-2":"Product samsung"
   },
   {  
      "/folder1/folder2/folder3/product-3":"Product lenovo"
   },
   {  
      "/folder1/folder2/folder3/product-4":"Product Asus"
   },
   {  
      "/folder1/folder2/folder3/product-5":"Product Acer"
   },
   {  
      "/folder1/folder2/folder3/product-6":"Product Vivo"
   },
   {  
      "/folder1/folder2/folder3/product-7":"Product Oppo"
   }
]

// in the view
<ng-container *ngFor="let result of results">
  view logic goes here
</ng-container>

That's an answer for `angular`, not `angularjs` – BShaps May 14 '18 at 17:30 — BShaps, May 14 '18 at 17:30

how to loop through array of json objects in angularjs

2 Answers2