How to access values inside a multiple array JSON object?

Question

How can I access array data inside my json object data?

    const [data, setData] = useState([])

    const getData = () => {
      axiosInstance
        .get(url + slug)
        .then(result => setData(result.data))
    }
    useEffect(() => {
      getData()
    }, [])

Here are something I've tried:

  console.log(data['symbol'])
  console.log(data[0]['symbol'])
  console.log(data[0].symbol)

Here is the data being used in my state:

To keep it simple, lets say I want to the access first array, and console log all values for symbol. How would I go about doing that?

console.log(data[0][0]). It will print first object inside first array of data. — Fatur
– Fatur, Commented Feb 15, 2021 at 22:38
I've tried that but I get Uncaught TypeError: Cannot read property '0' of undefined — yung peso
– yung peso, Commented Feb 15, 2021 at 22:39
Where are you logging it? If you have it outside the fetch, data is empty on the first render, so will throw an error. Also, you should either add getData to your useEffect dependency array, or move it inside. — pilchard
– pilchard, Commented Feb 15, 2021 at 22:41
It's outside the fetch, I'm just playing with my JSON object and getting a feel for it because I eventually will map this data. — yung peso
– yung peso, Commented Feb 15, 2021 at 22:45
Then check if it has been populated before trying to access it. if (data.length){console.log(...);} — pilchard
– pilchard, Commented Feb 15, 2021 at 22:47

Sebastien Castiel · Accepted Answer · 2021-02-15 22:41:51Z

1

Your object data looks like an array of arrays of objects.

This should work:

data[0][0].symbol

To log all the symbols of the first array:

console.log(data[0].map(item => item.symbol))

answered Feb 15, 2021 at 22:41

Sebastien Castiel

1667 bronze badges

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

1 Comment

yung peso Over a year ago

From pilchard comment, I understand that if this is outside of the fetch then I will get an error. Not quite sure why because I can access the data through console log just fine.

Zolfekar Askarieh · Accepted Answer · 2021-02-15 22:42:20Z

1

To access the first array you can use this data[0] to map through all the objects inside the first array and log them you do the following

data[0].map(item => console.log(item.symbol))

answered Feb 15, 2021 at 22:42

Zolfekar Askarieh

2012 silver badges2 bronze badges

Collectives™ on Stack Overflow

How to access values inside a multiple array JSON object?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related