Question 109854 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

How to treat JSON data in React?

I am using the following code using a flight data API:

useEffect(() => {

fetch(url, options)
    .then((res) => res.json())
    .then((json) => {
        console.log(json);
        datos.push(json)
    })
    .catch((err) => console.log('error' + err));
    }, []);

return (
    <div className='ejemplo'>
        {JSON.stringify(datos)}
    <div>
    )

and this is the result in the DOM:

[{"success":true,"data":{"2023-02-08":{"origin":"MAD","destination":"BCN","price":88,"airline":"UX","flight_number":7701,"departure_at":"2023-02-08T07:30:00+01:00","return_at":"2023-02-12T11:50:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"},"2023-02-09":{"origin":"MAD","destination":"BCN","price":69,"airline":"IB","flight_number":3034,"departure_at":"2023-02-09T21:15:00+01:00","return_at":"2023-02-13T18:05:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"},"2023-02-14":{"origin":"MAD","destination":"BCN","price":69,"airline":"IB","flight_number":3012,"departure_at":"2023-02-14T11:30:00+01:00","return_at":"2023-02-18T21:05:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"},"2023-02-15":{"origin":"MAD","destination":"BCN","price":69,"airline":"IB","flight_number":3034,"departure_at":"2023-02-15T21:15:00+01:00","return_at":"2023-02-19T14:30:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"},"2023-02-16":{"origin":"MAD","destination":"BCN","price":87,"airline":"IB","flight_number":3018,"departure_at":"2023-02-16T16:00:00+01:00","return_at":"2023-02-20T12:35:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"},"2023-02-17":{"origin":"MAD","destination":"BCN","price":57,"airline":"IB","flight_number":5003,"departure_at":"2023-02-17T22:20:00+01:00","return_at":"2023-02-21T20:30:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"},"2023-02-19":{"origin":"MAD","destination":"BCN","price":63,"airline":"UX","flight_number":7701,"departure_at":"2023-02-19T07:30:00+01:00","return_at":"2023-02-23T20:30:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"},"2023-02-21":{"origin":"MAD","destination":"BCN","price":69,"airline":"IB","flight_number":3012,"departure_at":"2023-02-21T11:30:00+01:00","return_at":"2023-02-25T14:30:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"},"2023-02-23":{"origin":"MAD","destination":"BCN","price":52,"airline":"UX","flight_number":7701,"departure_at":"2023-02-23T07:30:00+01:00","return_at":"2023-02-27T11:50:00+01:00","transfers":0,"expires_at":"2023-02-07T08:27:20Z"}

How can I modify my code in order to obtain just the origin, destination and price attributes? Thanks you all.

I tried to add a . plus the search attributes but no correct response was given.

Tags:

2

Answers


  1. 0

    You can extract only the desired attributes by using object destructuring in the .then function. Here’s an example:

    .then((json) => {
    const {data} = json;
    const flightData = Object.values(data).map(({origin, destination, price}) => ({origin, destination, price}));
    datos.push(flightData);
})

    In this example, Object.values(data) is used to get an array of flight data objects from the data object. Then, .map is used to extract only the origin, destination, and price properties from each object and create a new array of flight data objects with just those properties. This new array is then pushed to the datos array.

    Login or Signup to reply.
  2. 0

    You can loop your data by key and create a custom array of objects:

    const [datos, setDatos] = useState([]);

useEffect(() => {

    fetch(url, options)
        .then((res) => res.json())
        .then((json) => {
            const { success, data } = json;
            if (!success) console.log(error);
            else {
                const dataList = [];
                for (const key in data) {
                    const { origin, destination, price } = data[key];
                    dataList.push({ origin, destination, price });
                }
                setDatos(dataList);
            }
        })
        .catch((err) => console.log('error' + err));
        }, []);
    
    return (
        <div className='ejemplo'>
            {
                datos.length > 0 && datos.map((d, index) => {
                    return <div key={index}>
                        <p>{d.origin}</p>
                        <p>{d.destination}</p>
                        <p>{d.price}</p>
                    </div>
                }
            }
        </div>
        )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search