将 json object 解析为数组

Question

i am stuck with this and i don't know how to do it. so basically i got this json data from api:

this is what i'm getting in the console when i log the data:

what i want to do is to parse this object to take the id,title,url,thumbnailUrl and store them to a new array

code to get the data:

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

    useEffect(() => {
        axios.get("https://jsonplaceholder.typicode.com/photos").then(
            result => {
                setPhoto(result.data)
            }
        )

    },[])

hope you can help me and thank you

Answer 1

Below newData is new array.

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

If you want to take only few properties. Below will give you new array with only mentioned properties.

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

With so many records being fetched from API, also consider if you want to make multiple calls and fetch only what is needed. Also consider if you really want to trim the number of properties as payload is slightly huge.

Answer 2

you already have all the data you need. if you need only with some specific fields use map operator.

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

this will give you the required fields, in a new array (map is responsible for the new array).

Answer 3

you can assign to array batch inside return axios directly.
This is complete code.

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

You can map on every item returned by the response as given:

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

},[])

This dataArray will contain all the items returned by the api