Fetching data from local JSON file using axios and displaying data

Question

This is a local JSON file I wrote.

{ "data":[
    {
    "photo": "https://source.unsplash.com/aZjw7xI3QAA/1144x763",
    "caption": "Viñales, Pinar del Río, Cuba",
    "subcaption": "Photo by Simon Matzinger on Unsplash",
    "thumbnail": "https://source.unsplash.com/aZjw7xI3QAA/100x67",
    }, 
    {
    "photo": "https://source.unsplash.com/c77MgFOt7e0/1144x763",
    "caption": "La Habana, Cuba",
    "subcaption": "Photo by Gerardo Sanchez on Unsplash",
    "thumbnail": "https://source.unsplash.com/c77MgFOt7e0/100x67",
    },
    {
    "photo": "https://source.unsplash.com/QdBHnkBdu4g/1144x763",
    "caption": "Woman smoking a tobacco",
    "subcaption": "Photo by Hannah Cauhepe on Unsplash",
    "thumbnail": "https://source.unsplash.com/QdBHnkBdu4g/100x67",
    }
]
}

and I don't understand why can't I map value after resolving. I fetched data and resolved it, and when I call console.log(response.data) I do get the JSON object, but when I want to map it, it show me an error that photos.map isn't function.

import React from 'react'
import { useState, useEffect } from 'react'
import axios from 'axios'

function FetchingData() {
    const [photos, setPhotos] = useState([]);

    useEffect(()=>{
        axios.get('photos.json')
        .then(response => {
            console.log(response)
            setPhotos(response.data)
        })
    })

    return (
        <div>
            <ul>
               {photos.map(photos => (<li>{photos.photo}</li>)
               )}
            </ul>
        </div>
    )
}

export default FetchingData

The first note is that your JSON is invalid, you can validate JSON online (E.g from here jsonlint.com ) — Az.Youness
– Az.Youness, Commented Jan 11, 2020 at 0:00
Christian's answer is the one. Put simply, EVERY axios response has the payload on its data property. Your payload happens to also have its own data property too. — tobiasfried
– tobiasfried, Commented Jan 11, 2020 at 3:54
@Az.Youness yes it was, a comma in the end, but it wasn't the main problem... — Slobodan Draksimovic
– Slobodan Draksimovic, Commented Jan 17, 2020 at 15:37

Christian Fritz · Accepted Answer · 2020-01-10 23:57:20Z

4

I believe you are missing a data. The response from the axios call will contain the payload (your JSON file) in data, i.e., response.data. However, that is an object (which has no map function). I believe you are after the array in your own data field, so try:

            setPhotos(response.data.data)

answered Jan 10, 2020 at 23:57

Christian Fritz

21.5k3 gold badges48 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrLizzard · Accepted Answer · 2020-01-11 00:05:55Z

1

If your json file contains a data field as an array, you need to call

setPhotos(response.data.data);

Otherwise, try to use JSON.parse() (even if I know axios automatically parse json as object, but you never know)

answered Jan 11, 2020 at 0:05

MrLizzard

1789 bronze badges

Collectives™ on Stack Overflow

Fetching data from local JSON file using axios and displaying data

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related