I have a categories array from that I need to print Category ,category name, pictures and videos and comments.
this is my array
import React from 'react';
function App() {
const categories = [
{
"Lots and Grounds": [
{
"categoryName": "Lots and Grounds",
"prompt": "PORCH",
"description": "Concrete",
"rating": "Defective",
"ratingAbbreviation": "T",
"ratingColor": "#212121",
"answerText": "bla bla blaaaaaa",
"showOnSummary": "1",
"isRepairSelected": 1,
"repairAmountEntered": "110",
"repairCommentEntered": null,
"categoryDisclaimer": "bla bla bl;aaaaa",
"subCategory": null,
"pictures": [
"IMG_0856.JPG",
"IMG_0831.JPG",
"IMG_0848.JPG"
],
"videos": [],
"picture_decorations": {
"IMG_0856.JPG": [
{
"decoration_type": "0",
"decoration_color": "#D81919",
"decoration_begin_vertical": "0.41",
"decoration_begin_horizontal": "0.29",
"decoration_end_vertical": "0.64",
"decoration_end_horizontal": "0.40"
}
],
"IMG_0831.JPG": [
{
"decoration_type": "0",
"decoration_color": "#D81919",
"decoration_begin_vertical": "0.25",
"decoration_begin_horizontal": "0.57",
"decoration_end_vertical": "0.47",
"decoration_end_horizontal": "0.52"
}
],
"IMG_0848.JPG": [
{
"decoration_type": "1",
"decoration_color": "#D81919",
"decoration_begin_vertical": "0.08",
"decoration_begin_horizontal": "0.29",
"decoration_end_vertical": "0.45",
"decoration_end_horizontal": "0.71"
}
]
}
},
{
"categoryName": "Lots and Grounds",
"prompt": "VEGETATION",
"description": "Trees, Shrubs",
"rating": "Marginal",
"ratingAbbreviation": "T",
"ratingColor": "#212121",
"answerText": "answer text here",
"showOnSummary": "1",
"isRepairSelected": 1,
"repairAmountEntered": "1",
"repairCommentEntered": null,
"categoryDisclaimer": " disclaimer text here.",
"subCategory": null,
"pictures": [],
"videos": [],
"picture_decorations": []
}
]
}
];
return (
<div className="container">
<h1>CATEGORIES</h1>
{categories.map((category, index) => (
<div data-index={index}>
<p>Category: Lots and Grounds): </p>
<p>CategoryName {1} {category.categoryName}(for eg: )</p>
<p>Prompt {category.prompt}(for eg:PORCH )</p>
<p>Pictures(from pictutes array): {}</p>
<p>Picture decorations(from pictutes decorations array): {} </p>
<p>Videos(from videos array): {} </p>
<p>Credits: {category.repairAmountEntered} </p>
<p>Comments: {category.repairCommentEntered} </p>
</div>
))}
</div>
);
}
export default App;
here is the sandbox link for this. KIndly help
CodePudding user response：
import "./styles.css";
import React from "react";
function App() {
const categories = [
{
"Lots and Grounds": [
{
categoryName: "Lots and Grounds",
prompt: "PORCH",
description: "Concrete",
rating: "Defective",
ratingAbbreviation: "T",
ratingColor: "#212121",
answerText: "bla bla blaaaaaa",
showOnSummary: "1",
isRepairSelected: 1,
repairAmountEntered: "110",
repairCommentEntered: null,
categoryDisclaimer: "bla bla bl;aaaaa",
subCategory: null,
pictures: ["IMG_0856.JPG", "IMG_0831.JPG", "IMG_0848.JPG"],
videos: [],
picture_decorations: {
"IMG_0856.JPG": [
{
decoration_type: "0",
decoration_color: "#D81919",
decoration_begin_vertical: "0.41",
decoration_begin_horizontal: "0.29",
decoration_end_vertical: "0.64",
decoration_end_horizontal: "0.40"
}
],
"IMG_0831.JPG": [
{
decoration_type: "0",
decoration_color: "#D81919",
decoration_begin_vertical: "0.25",
decoration_begin_horizontal: "0.57",
decoration_end_vertical: "0.47",
decoration_end_horizontal: "0.52"
}
],
"IMG_0848.JPG": [
{
decoration_type: "1",
decoration_color: "#D81919",
decoration_begin_vertical: "0.08",
decoration_begin_horizontal: "0.29",
decoration_end_vertical: "0.45",
decoration_end_horizontal: "0.71"
}
]
}
},
{
categoryName: "Lots and Grounds",
prompt: "VEGETATION",
description: "Trees, Shrubs",
rating: "Marginal",
ratingAbbreviation: "T",
ratingColor: "#212121",
answerText: "answer text here",
showOnSummary: "1",
isRepairSelected: 1,
repairAmountEntered: "1",
repairCommentEntered: null,
categoryDisclaimer: "disclamer text here",
subCategory: null,
pictures: [],
videos: [],
picture_decorations: []
}
]
}
];
return (
<div className="container">
<h1>CATEGORIES</h1>
{categories.map((category, categoryIndex) => {
return (
<div key={categoryIndex}>
{Object.keys(category).map((key, childIndex) => {
return (
<div key={childIndex}>
{category[`${key}`].map((result, index) => {
console.log(result);
return (
<div data-index={index}>
<p>Category: Lots and Grounds): </p>
<p>
CategoryName {1} {result.categoryName}(for eg: )
</p>
<p>Prompt {result.prompt}(for eg: )</p>
<p>
Pictures(from pictutes array):{" "}
{result?.pictures?.map((picture, picutreIndex) => {
return <div key={picutreIndex}>{picture}</div>;
})}
</p>
<p>
Picture decorations(from pictutes decorations array):{" "}
{}{" "}
</p>
<p>
Videos(from videos array):
{result?.videos?.map((video, videoIndex) => {
return <div key={videoIndex}>{video}</div>;
})}{" "}
</p>
<p>Credits: {result.repairAmountEntered} </p>
<p>Comments: {result.repairCommentEntered} </p>
</div>
);
})}
</div>
);
})}
</div>
);
})}
</div>
);
}
export default App;
CodePudding user response：
If the structure of the JSON remains the same for every category, you can replace category with Object.values(category)[index][0] or Object.values(category)[index][1] inside jour JSX map function:
return (
<div className="container">
<h1>CATEGORIES</h1>
{categories.map((category, index) => (
<div data-index={index}>
<p>Category: {Object.keys(category)[index]}: </p>
<p>
CategoryName {1} {Object.values(category)[index][0].categoryName}(for eg: )
</p>
<p>Prompt {Object.values(category)[index][1].prompt}(for eg: )</p>
<p>Pictures(from pictutes array): {Object.values(category)[index][1].pictures}</p>
<p>Picture decorations(from pictutes decorations array): {Object.values(category)[index][1].picture_decorations} </p>
<p>Videos(from videos array): {Object.values(category)[index][1].videos} </p>
<p>Credits: {Object.values(category)[index][0].repairAmountEntered} </p>
<p>Comments: {Object.values(category)[index][1].repairCommentEntered} </p>
</div>
))}
</div>
</div>
))}