Tengo un grupo de objetos JSON anidados que necesito agregar a un campo de texto. Hay 6 objetos y no quiero codificar 6 campos de texto. He usado la funcionalidad .map en el pasado, pero no puedo hacer que funcione en este caso.
const [questions, setQuestions] = useState(''); const fetchQuestions = async () => { setQuestions( await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details/questions`) .then((response) => response.json()) ); }; useEffect(() => { fetchQuestions(); }, []);En el lado de mi declaración de devolución:
{questions?.map((row) => ( <TextField className="text-field" value={row?.Value || ''} variant="outlined" margin="normal" label={row['FieldName']} /> ))}Aquí hay una versión abreviada de mi 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 } ] }Puede usar el método de mapa solo para matrices. Para iterar a través del objeto, puede usar
Object.keys(questions).map(function(key, index) { //do something here })De lo contrario, puede usar un ciclo for pero no me gusta
for (var key in questions) { if (questions.hasOwnProperty(key)) { // use questions[key] } }