How do I go about displaying the JSON file data properly in react?
4 Answers
You effectively just want to pull the values of the object here, you can use Object.values in most modern browsers (unless you are using IE, which if you are I feel your pain)
Object.values(data).forEach(x => console.log(x.name))
To give you a working example in React:
import data from "./data.json"
function renderLinks() {
const records = Object.values(data);
return (
<ul>
{records.map((x, i) => <li key={i}><a href="#">{x.name}</a></li>)}
</ul>
)
}
4 Comments
user545642
I see. And I want to embed each of these names in a link, I can do that using Object.values() correct?
James
@DarrelGulseth yes you can, instead of
forEach you can simply map the result out e.g. Object.values(data).map(x => <a href="#">{x.name}</a>)
Zohaib Ijaz
@James Stay happy :)
user545642
@James Thank you very much.
You can use Object.keys() and then map name property
import data from './data.json'
// in render function, jsx
{Object.keys(data).map(key => <span key={key}>{data[key].name}</span>)}1 Comment
James
FWIW when rendering lists you should provide a
key, this code would flag a warning in the console.Object.keys(data) gives ["1", "2" ....];
So you can loop through keys
Object.keys(data).forEach(function(key){
console.log(data[key].name);
});
Comments
If you don't care about the order you can use Object.keys()
Object.keys(data).forEach((key) => {
console.log(data[key].name);
});
Otherwise, if you do care about the order, use a for loops and cast the integer as a string.
for(int i = 0; i < Object.size(data); i++){
console.log(data[i.toString()].name);
}
