Looping through a json object in react js file

Question

I have my json object array as

 {
  "_index": [
    "houseid"
  ], 
  "added": [
    {
      "description": "detail about column", 
      "houseid": "la 123", 
      "\ufeffID": "154"
    }, 
    {
      "description": "detail about column", 
      "houseid": "la 123", 
      "\ufeffID": "154"
    }, 
    {
      "description": "detail about column", 
      "houseid": "la 123", 
      "\ufeffID": "154"
    }, 
    {
      "description": "detail about column", 
      "houseid": "la 123", 
      "\ufeffID": "154"
    }
  ], 
  "changed": [], 
  "removed": [
    {
      "description": "detail about column", 
      "houseid": "la 123", 
      "\ufeffID": "154"
    }, 
    {
      "description": "detail about column", 
      "houseid": "la 123", 
      "\ufeffID": "154"
    }, 
    {
      "description": "detail about column", 
      "houseid": "la 123", 
      "\ufeffID": "154"
    }, 
    {
      "description": "detail about column", 
      "houseid": "la 123", 
      "\ufeffID": "154"
    }
  ]
}

I want to apply a loop so i can present details for added, removed changed as below: description houseid effid detail about column la 123 154 detail about column la 123 154

score 0 · Answer 1 · answered Nov 23 '17 at 04:42

0

just import with some name, and get what you want.

import data from '../../result/result.json';

/* somewhere */
let to-add = data.toadd; // get field what you want.

answered Nov 23 '17 at 04:42

godsenal

387
2
12

yes i cant access to-add as to-add = data.toadd – wingskush Nov 23 '17 at 08:35
but i want to iterate it in a loop so i can publish it in a table under and tag for toadd, removed, changed – wingskush Nov 23 '17 at 08:36

score 0 · Answer 2 · answered Nov 23 '17 at 04:44

You probably would want to use the forEach method of the lodash library. It will give you freedom to loop over the keys of objects as well.

_.forEach(object, (value, key) => {
    //do operations on value and key
})

If you need to render in react by looping over elements, you probably want to do something like this:

render(){
    return (
        <div>
        {_.map(elements, (item) => {
            <div>{item.name}</div>
        })}
        </div>
    );
}

You can make this work for table too. You can refer to this answer as well.

i have updated the question. and map is not recognized in my table.component.js — wingskush, Nov 23 '17 at 08:35

Looping through a json object in react js file

2 Answers2