reactjs 如何在React中处理JSON数据？

2uluyalo 于 2023-02-08 发布在 React

关注(0)|答案(2)|浏览(193)

我使用以下代码使用飞行数据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\>
    )

这是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"}
我如何修改我的代码，以获得只是原产地，目的地和价格属性？谢谢大家。
我尝试添加a . plus搜索属性，但没有给出正确的响应。

reactjs

来源：https://stackoverflow.com/questions/75370168/how-to-treat-json-data-in-react

2条答案

按热度按时间

azpvetkf1#

您可以按键循环data并创建一个自定义对象数组：

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>
        )

赞(0）回复(0）举报 2023-02-08

xcitsw882#

通过在.then函数中使用对象重构，可以只提取所需的属性。

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

在此示例中，使用Object.values(data)从data对象获取飞行数据对象数组。然后，使用.map从每个对象中仅提取origin、destination和price属性，并仅使用这些属性创建飞行数据对象的新数组。然后将此新数组推送到datos数组。

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs 如何在React中处理JSON数据？

2条答案

相关问题

热门标签

最新问答