Again map through the inner elements present in the result[item].
return (
<React.Fragment>
{ Object.keys(result).map((item, i) => (
<div key={i} className="report">
{result[item].map((media,ind) =>
<div key={ind}>{media.name}</div>
)}
</div>
))}
</React.Fragment>
)
Answer from CodeZombie on Stack OverflowAgain map through the inner elements present in the result[item].
return (
<React.Fragment>
{ Object.keys(result).map((item, i) => (
<div key={i} className="report">
{result[item].map((media,ind) =>
<div key={ind}>{media.name}</div>
)}
</div>
))}
</React.Fragment>
)
Try this code : Here is the link to the code on: https://codesandbox.io/s/pj1lv7y4xq
const arrayvals = [
{ Number: 1, newNumber: "1", name: "FB" },
{ Number: 3, newNumber: "2", name: "FB" },
{ Number: 7, newNumber: "5", name: "GK" },
{ Number: 8, newNumber: "4", name: "FW" }
]
function App() {
return (
<div className="App">
<h1>Mapping object keys in react and returning child properties
</h1>
{Object.entries(arrayvals).map((arr)=>{
return <div>Number is : {arr[1].Number} || NewNumber is : {arr[1].newNumber} || and Value is : {arr[1].name}</div>
})}
</div>
);
}
reactjs - How to properly map through objects in react but only show a specific value - Stack Overflow
React map key value - javascript
reactjs - Accessing key name in key-value pairs on props object in React - Stack Overflow
Problem with Object.keys.map in React
Create a mapper object that maps your json keys to custom keys and use that object to render
const mapper = {
kills: "Solo Kills Total"
}
{Object.entries(stats1).map(([key, value], i) => {
return (
<Text> {mapper[key] ? mapper[key] : key} : {value}</Text>
)
})}
Considering we are getting the data you want like this:
const obj = {
"kills": 5067,
}
by something like this:
response?.data.data.data.stats.all.solo.kills //added kills
then we can rename kills like this:
delete Object.assign(obj, {SoloKillsTotal: obj.kills})['kills'];
console.log(obj);
you can only map through an array. You are mapping through stream.results which appears to be an object. You need to use another option to loop through the objects properties to get to the values. There is a few ways you can achieve this and what is going to be best will be dependant on your scenario and exactly how you want to display the data.
for in loop, Object.keys(yourobject), Object.entries(yourobject) and Object.values(yourobject) are all options for getting into objects and extracting specific data. You need one or a combination of those to get your information.Play around with those in the console and read up about them on MDN If you get to an actual array, you can map that.. ex rent and buy can be mapped.
You are trying to map an object while the function is intended for Arrays. To get around that, create an array of your object keys and map over them.
return (
<div>
{Object.keys(results).map(key => (
<li>{results[key].link}</li>
)}
</div>
)
When calling Object.keys it returns a array of the object's keys.
Object.keys({ test: '', test2: ''}) // ['test', 'test2']
When you call Array#map the function you pass will give you 2 arguments;
- the item in the array,
- the index of the item.
When you want to get the data, you need to use item (or in the example below keyName) instead of i
{Object.keys(subjects).map((keyName, i) => (
<li className="travelcompany-input" key={i}>
<span className="input-label">key: {i} Name: {subjects[keyName]}</span>
</li>
))}
You get this error because your variable subjects is an Object not Array, you can use map() only for Array.
In case of mapping object you can do this:
{
Object.keys(subjects).map((item, i) => (
<li className="travelcompany-input" key={i}>
<span className="input-label">{ subjects[item].name }</span>
</li>
))
}
I don't use them, so am wondering if there is something good am missing? in what case would you prefer them over Arrays of Objects?