I have a group of nested JSON objects which I need to append to a text field. There are 6 objects and I don't want to hard code 6 text fields. I have used the .map functionality in the past, but I cannot get it to work in this case.
const [questions, setQuestions] = useState('');
const fetchQuestions = async () => {
setQuestions( await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details/questions`)
.then((response) => response.json())
);
};
useEffect(() => {
fetchQuestions();
}, []);
In side my return statement:
{questions?.map((row) => (
<TextField
className="text-field"
value={row?.Value || ''}
variant="outlined"
margin="normal"
label={row['FieldName']}
/>
))}
Here is a shortened version of my JSON:
{
"Consulting": [
{
"Question": null,
"Response": null
}
],
"FED": [
{
"Question": "1. Is there any impact to the region applications?",
"Response": "No"
},
{
"Question": "2. If number 1 is \"Yes\", then are any of the below applications being
impacted?",
"Response": "No"
},
{
"Question": "3. Are you changing data structure? \r\n",
"Response": null
}
],
"IPE": [
{
"Question": "1. Do you need compute (servers), storage, databases, and/or platform capacity for your effort?",
"Response": "Yes"
},
{
"Question": "2. If yes, please describe:",
"Response": "I need servers"
},
{
"Question": "3. Do you need Database Services?\r\n",
"Response": null
}
]
}
You can use map method only for arrays. For iterate through object, you can use
Object.keys(questions).map(function(key, index) {
//do something here
})
Otherwise you can use a for cycle but i dislike it
for (var key in questions) {
if (questions.hasOwnProperty(key)) {
// use questions[key]
}
}