将 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 = photo

useEffect(() => {

    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

下面是新数组。newData

var newData = [...result.data];

如果你只想拿几个属性。下面将为您提供仅具有上述属性的新数组。

var newData = result.data.map(({id, title, url, thumbnailUrl}) => ({id, title, url, thumbnailUrl}));

由于从API获取了如此多的记录，还要考虑是否要进行多次调用并仅获取所需的记录。还要考虑是否真的要修剪属性的数量，因为有效负载稍微大一些。