es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo recuperar datos de una petición desde JSON.

22 May, 2023 Programación

En un componente React

import React from ‘react’;
export default function Customers (props) {
const [customers, setCustomers] = React.useState([]);
React.useEffect(() => {
fetch(“/data.json”).then(response => response.json())
.then(data => {
setCustomers(data.customers)
})
}, []);

return (

{customers.map(c => c.name)}

)
}

¿Cómo puedo mostrar solo los nombres de los clientes de un archivo en el directorio público llamado data.json?

{
“customers”: [
{
“id”: 542,
“name”: “E”
},
{
“id”: 354,
“name”: “V”
},
{
“id”: 54534
“name”: “A”
} ,
{
“id”: 33,
“name”: “K”
}
],
“packages”: [
{
“id”: 3643453453453,
“weight”: 6343
},
{
“id”: 453453,
“weight”: 4534534534
}
]
}

Intenté usando customers[“customers”] o customers.customers, pero nada funcionó…

Gracias.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Se puede utilizar el método map() para iterar sobre el array customers y devolver la propiedad name de cada cliente.

    import React from 'react';
export default function Customers (props) {
   const [customers, setCustomers] = React.useState([]);
   React.useEffect(() => { 
      fetch("/data.json").then(response => response.json())
      .then(data => {
         setCustomers([data])
      })
   }, []);

<p>return (
      <div id='Customers'>
         {customers.map(c => c.customers.map(customer => customer.name))}
      </div>
   )
}

Comments are closed.