iterate json data in react

how to map json data with array in react native
react loop through array of objects
react loop through object
react map
how to render json data in reactjs
get value from json object react native
react loop through state object
how to iterate map in react js

i am new to react and JSON, i need to process(iterate) some JSON data in react the JSON prototype is given below,"i want console each of the room number which belongings to different category", how can a achieve this using map function

please help me out solve the problem. "sorry for my bad English, English is not my first language.

let data = {
  "category": {
    "king": [{
        "id": 1,
        "room_no": 101,
        "price": 2000
      },
      {
        "id": 2,
        "room_no": 102,
        "price": 3000
      }
    ],
    "queen": [{
        "id": 1,
        "room_no": 101,
        "price": 2000
      },
      {
        "id": 2,
        "room_no": 102,
        "price": 3000
      }
    ]
  }
} 

Iterating through JSON data in React, A look at fetching data from a third party API, and looping through it to show results using Object.keys. When we fetch this in React it returns an object full of JSON data that we then set as state (Fetching data from an API is an entire topic on its own, see further info at the bottom for an excellent video from Jack Franklin on how to do this). We can then pass this state down to our child component using props.

You cannot actually do this using map alone. Or at least, it would be counter to how map is usually used.

You can use multiple map steps to convert the object to a nested list—in this case a list of list of lists of objects—; but you will also need to flatten the result of the map to a list of numbers. See here:

let data = {
    "category": {
        "king": [{
                "id": 1,
                "room_no": 101,
                "price": 2000
            },
            {
                "id": 2,
                "room_no": 102,
                "price": 3000
            }
        ],
        "queen": [{
                "id": 1,
                "room_no": 101,
                "price": 2000
            },
            {
                "id": 2,
                "room_no": 102,
                "price": 3000
            }
        ]
    }
};

const room_nos = Object.values(data)
.map(entry => 
  Object.values(entry)
  .map(category => 
    category.map(room => room.room_no)))
.reduce((result, array) => result.concat(array), [])
.reduce((result, array) => result.concat(array), []);

console.log(room_nos);

React iterate through object nested in array, I'm working with some JSON data in a React app using Axios and I am having trouble iterating through an object nested in an array. React components using ES6 classes don't autobind this to non React methods. In your constructor, add: this.renderJSON = this.renderJSON.bind(this)

For consoling room_no:

[].concat.apply([], Object.values(data["category"])).map(i => console.log(i.room_no))

Output:

101
102
101
102

Object.values(data["category"]) gives the values of king and queen categories in a nested array format and [].concat.apply([], [nested_array]) flattens it to a single level array in which Array.prototype.map() is applied

For formatting the result like category : room_no:

for(key in data["category"]){
  data["category"][key].map(i => console.log(`${key} : ${i.room_no}`))
}

Output:

king : 101
king : 102
queen : 101
queen : 102

Here looped over data["category"] and applied Array.prototype.map().

How can I loop over this object in React?, React, looping over an object. Tagged with react, loop, json. jsonResponse from './data'; console.log(jsonResponse); // const ArrayLength  I've come across a problem working in react native. I've parsed a large JSON object and need to iterate over an array nested inside it. All I need to do is print three values in each item object for day[0]. My code:

React Get JSON and Iterate Through, Format on Save. If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting. Because you defined initial state like this: this.state = { data:[] }; But you are not using data as array you are using data as object and inside this object you have to give default value for unassignedUsers so this.state = { data: { unassignedUsers: [] } }; If you define initial state like this in first render unassignedUsers will be mapped as an empty array so there will not be any

How to loop through arrays in React, You will often find yourself having to loop through lots of data whenever you're building an React application. Let's look at three ways that you  If you have JSON instead of Array and you want to loop in JSX react render function use Object.keys: <select className="form-control" > {Object.keys(item.unit).map(unit => { return <option value="1">1</option> })} </select>

How to iterate over a list in React JS, This answer assumes you are receiving the list as a JSON array - you may have to convert your data to become an array if this is not the case (java.util.list should​  This answer assumes you are receiving the list as a JSON array - you may have to convert your data to become an array if this is not the case (java.util.list should help you here, though I&#039;m a bit rusty on my Java).

Comments
  • if i want to display this in the format like this: king:101,king:102,queen:101,queen:102