将 json 对象解析为数组

Question

我被困在这个，我不知道该怎么做。所以基本上我从API得到了这个json数据：

这是我在记录数据时在控制台中得到的：

我想做的是解析这个对象，以获取id，标题，网址，缩略图Url并将它们存储到一个新的数组中

获取数据的代码：

const [photo,setPhoto] = useState([])

    const newPhotosLocally = photo

    useEffect(() => {

        axios.get("https://jsonplaceholder.typicode.com/photos").then(

            result => {

                setPhoto(result.data)

            }

        )

    },[])

希望你能帮助我，谢谢你

Answer 1

您可以映射响应返回的每个项目，如下所示：const [photo,setPhoto] = useState([])const newPhotosLocally = photouseEffect(() => {    axios.get("https://jsonplaceholder.typicode.com/photos").then(        result => {            var dataArray = result.data.map(({id, title, url, thumbnailUrl}) => ({id, title, url, thumbnailUrl}));            //do something with the array        }    )},[])此数据数组将包含 API 返回的所有项目

Answer 2

您已经拥有所需的所有数据。如果您只需要某些特定字段，请使用地图运算符。const newData = result.data.map(obj => {id,title,url,thumbnailUrl});这将为您提供新数组中的必填字段（映射负责新数组）。

Answer 3

您可以直接在返回公理中分配给数组批处理。这是完整的代码。const [photo,setPhoto] = useState([])useEffect(() => {  axios.get("https://jsonplaceholder.typicode.com/photos").then(      result => {        // Add bellow here code        let newData = result.data.map(({id, title, url, thumbnailUrl}) => ({id, title, url, thumbnailUrl}));        setPhoto(newData);      }  )},[])

Answer 4

下面是新数组。newDatavar newData = [...result.data];如果你只想拿几个属性。下面将为您提供仅具有上述属性的新数组。var newData = result.data.map(({id, title, url, thumbnailUrl}) => ({id, title, url, thumbnailUrl}));由于从API获取了如此多的记录，还要考虑是否要进行多次调用并仅获取所需的记录。还要考虑是否真的要修剪属性的数量，因为有效负载稍微大一些。