We Keep Coding

How to iterate json object field in react

There is a JSON for categories with the following structure
[
{
"category": "Mobiles",
"sub": [
{
"name": "Apple"
},
{
"name": "Samsung"
}
]
},
{
"category": "Televisions",
"sub": [
{
"name": "Lg"
},
{
"name": "Sony"
}
]
}
]
First i load data from backend to a variable called categories (On the backend side im using expressjs and pass data with res.json(JSON.parse(fs.readFileSync('categories.json')))
I want to iterate through categories sub category with
{categories.map(function (category, i) {
return (
<>
<h6 Key={i}>{category.category}</h6> //For example: <h6>Mobiles</h6>
<>... [logic to iterate the current category's sub categories] ...</> //For example: <p>Apple</p> <p>Samsung</p>
</>
);
})}
I tried to use a second map on category.sub like category.sub.map((s,j)=><p Key={j}>{s.name}</p>) but unfortunely i can't get it work, and I can't describe my problem to Google in English so it can be an easy answer and i am the big L
Any help?
Thanks

Try this, uncomment out the console.log to verify data if screen is white.
return (
<>
{categories.map(function (category, i) {
// console.log(category.category );
// console.log(category.sub );
return (
<>
<h6 key={i}>{category.category}</h6>
<>
{category.sub.map(function (sub, j) {
// console.log(category.category + '' + sub.name);
return <p key={j}> {sub.name}</p>;
})}
</>
</>
);
})}
</>
);
Data:
let categories = [
{
category: 'Mobiles',
sub: [
{
name: 'Apple',
},
{
name: 'Samsung',
},
],
},
{
category: 'Televisions',
sub: [
{
name: 'Lg',
},
{
name: 'Sony',
},
],
},
];

Creating dictionary in React

I'm creating an interactive viz with React and I would like to add a slider in my viz.
import "./styles.css";
import React from "react";
import Sunburst from "react-zoomable-sunburst";
import { data } from "./data";
import { Slider } from "#mui/material";
class App extends React.Component {
onSelect(event) {
console.log(event);
}
render() {
return (
<div className="App">
<Sunburst
width="400"
height="400"
data={data.a}
count_member="size"
labelFunc={(node) => node.data.name}
_debug={false}
/>
<Slider
aria-label="Year"
defaultValue={2016}
valueLabelDisplay="auto"
step={1}
marks
min={2016}
max={2020}
/>
</div>
);
}
}
export default App;
Above is my code. I added my data from 2016 to 2020 in data.js file and I want my viz to change according to the year as I move my slider.
a: {
name: "2020",
children: [
{
name: "Campus",
children: [
{
name: "Liabilities",
children: [
{
name: "Current Liabilities",
children: [
{ name: "Accounts payable", size: 53010 },
{ name: "Accrued salaries", size: 23554 },
{ name: "Unearned revenue", size: 253322 },
{ name: "Commercial paper", size: 326008 },
{ name: "Current portion of long-term debt", size: 112431 },
{ name: "Funds held for others", size: 2500 },
{ name: "Other current liabilities", size: 71036 }
]
}
This is a part of my code in data.js and I named 2016 data as a, 2017 as b, and so on.
I wanted to name as 2016, 2017... instead of a,b... but this didn't work since data.2016 didn't work. (So I made it data.a in the code above)
So currently, my slider doesn't work. Is there any way to make dictionary or other method in React to resolve this problem?
Thanks.

use
data['2016']
That should work.

how to set column name in mui datatables using object key

I'm trying to use an object key to set the name of a column in MUI Datatables.
I'm trying to set one of the column names with the first element of children.childName
so that in that column it will display list of child names, but only the first child.
In Current way that Im trying this, I am getting no errors, and its displaying nothing in the childName Column on the table.
How Can I access an object thats inside an array?
This is my Data:
const data = [
{
name: "Pat",
company: "Test Corp",
city: "Yonkers",
state: "NY",
children: [
{ childName: "Pat Jun", childAge: 2 },
{ childName: "Mary Jun", childAge: 2 }
]
},
];
const columns = [
{
name:name: data[0]["children"][0]["childName"],
label: "Child Name",
options: {
filter: true,
sort: true
}
}]
MuiTable.js
function MuiTable({ forms }) {
console.log("cols", columns);
return (
<MUIDataTable
title={"Title"}
data={data}
columns={columns}
options={options}
/>
);
}
By doing a console.log I can see that it is printing the value instead of the object key name
I would really appreciate any help, Thank you.

You need to use customBodyRender like this:
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { Typography } from "#material-ui/core";
import "./styles.css";
function App() {
const data = [
{
name: "Pat",
company: "Test Corp",
city: "Yonkers",
state: "NY",
children: [
{ childName: "Pat Jun", childAge: 2 },
{ childName: "Mary Jun", childAge: 2 }
]
}
];
const columns = [
{
name: "children",
label: "Child Names",
options: {
filter: true,
sort: true,
customBodyRender: (value, tableMeta, updateValue) => (
<Typography>
{value.map(child => child.childName).join(",")}
</Typography>
)
}
}
];
return (
<div>
<MUIDataTable title={"Title"} data={data} columns={columns} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Thanks very much to #Klaus your answer. That's pretty much what I had to do, but In my case, I wanted to only display the first childName in the object children which was in an array of objects.
So I had to adapt it a bit and change my data structure as well.
This is what I ended up doing.
I first added a simple array to my data structure completely seperate to the array containing the children objects called childNames, which just came contained only the names.
This made it alot easier to access the childNames as it was just a simple array not nested in anything.
So I simply just displayed the first element in the array on Table
const columns = [
{
name: "childNames",
label: "Child Name",
options: {
filter: true,
customBodyRender: (value, tableMeta, updateValue) => {
return <div>{value[0]}</div>;
}
}
},
The reason why I created an array for just childNames, was because trying to access only just the first childName in the array containing children objects was proving very complicated and difficult.
Thanks very much for all the help.

Display array list of object in React JS

Hi I have this list array of object in react js and I don't know how to display in my render view. Anyone can give an idea on how to do it?
Post:{
Store1: [
0:{Id:"0001", Business:"Ministop"}
]
Store2: [{
0:{Id:"0002", Business:"Grocery Store"}
}]
Store3: [
0:{Id:"0003", Business:"Seven Eleven"}
]
Store4: [
0:{Id:"0004", Business:"Big Store"},
1:{Id:"0005", Business:"Medium Store"}
]
}
This is the sample output:
**Store 1**
**Id Business**
0001 Ministop
**Store 2**
**Id Business**
0002 Grocery Store
**Store 3**
**Id Business**
0003 Seven Eleven
**Store 4**
**Id Business**
0004 Big Store
0005 Medium Store
I have this code and I've got an error this.state.post.map is not a function
render() {
const groupList = this.state.post.map((data, index) => {
return (
<div key={index}>
<div>{data}</div>
</div>
)
});
return (
<div>{groupList}</div>
)
}
Thank you

This is how you map it. just change post with this.state.post
const post = {
Store1: [
{ Id: '0001', Business: 'Ministop' }
],
Store2: [
{ Id: '0002', Business: 'Grocery Store' }
],
Store3: [
{ Id: '0003', Business: 'Seven Eleven' }
],
Store4: [
{ Id: '0004', Business: 'Big Store' },
{ Id: '0005', Business: 'Medium Store' }
]
};
console.log(Object.keys(post).reduce((acccumilator, iterator) => {
return [...acccumilator, ...post[iterator]];
}, []));
/*
Object.keys(this.state.post).reduce((acccumilator, iterator) => {
return [...acccumilator, ...post[iterator]];
}, []).map(data => {
return (
<div key={data.id}>
<div>{data.Business}</div>
</div>
)
})
*/

map is not a method of an object. You can map over its keys using Object.keys.
render() {
const groupList = Object.keys(this.state.post).map((key) => {
return (
<div key={key}>
<div>{this.state.post[key]}</div>
</div>
)
});
return (
<div>{groupList}</div>
)
}
However, there are other problems once you fix that but you should try to solve them yourself and ask other questions if you can't

React doesn't send entries to DOM

I am making an AJAX request inside my export default class List extends React Component. It works fine and I see the requested array being returned in the form of:
[{...}, {...}, ...]
where each object inside the return is structured like this:
{
description: "bla",
id: "5b4915c37ae56418fcddb88f",
link: "www.website.com",
name: "bla",
position: "bla",
requirements: {
age: 99,
citizenship: "bla",
degree: "bla"
},
salary: "1",
state: "bla"
}
The return is set in the component's state. My render function looks like this:
render() {
let entries = this.state.listEntries
let mapper = entries.forEach((item,index) => {
console.log(entries)
return (
<li key={index}>
{item.name}
{item.position}
</li>
)
})
return (
<div className="listWrapper">
<HeaderBar props={this.state.props}/>
<ul className="list">
{mapper}
</ul>
</div>
)
}
React doesn't show the item.name or item.position, or any other item entry in the DOM. It seems like such a simple problem, but I just can't figure out what the issue is. There is no error in the console, it just doesn't display.

As forEach does not return anything you should use map for this kind of situations. Also, using index as a key can cause some problems, so you can use item.id instead of index.
class App extends React.Component {
state = {
listEntries: [
{
description: "bla",
id: "5b4915c37ae56418fcddb88f",
link: "www.website.com",
name: "bla1",
position: "bla1",
requirements: {
age: 99,
citizenship: "bla",
degree: "bla"
},
salary: "1",
state: "bla"
},
{
description: "bla",
id: "5b4915c37ae56468fcddb88f",
link: "www.website.com",
name: "bla2",
position: "bla2",
requirements: {
age: 99,
citizenship: "bla",
degree: "bla"
},
salary: "1",
state: "bla"
}
]
}
render() {
let entries = this.state.listEntries
let mapper = entries.map((item) => {
console.log(entries)
return (
<li key={item.id}>
{item.name}
{item.position}
</li>
)
})
return (
<div className="listWrapper">
<ul className="list">
{mapper}
</ul>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>