Fetch data and render to UI

JavaScript
1

Hello, I’m testing a data fetch function in a React project, but I’m having some trouble rendering the received data to the UI. The console.log part works and I can see the array and its object , so I know the data is being returned, but maybe I’m getting some syntax wrong, perhaps someone can offer a correction to my code – thanks for your help!

import { useState, useEffect } from 'react';

const Datafetch = () => {
const [price, setPrice] = useState([]);
    useEffect(() => {
        fetch(' URL-SORRY-THE-FORUM-BLOCKS-LINKS ')
            .then((res) => {
                return res.json();
            })
            .then((data) => {
                console.log(data);
                setPrice(data);
            });
    }, []);
    return (
        <div>
            {price.map((thePrice) => (
                <p key={thePrice.c} src={thePrice.c} />
            ))}
        </div>
    );
};

export default Datafetch

//and here’s what returned:
{“c”:188.925,“d”:1.245,“dp”:0.6634,“h”:188.93,“l”:186.7695,“o”:187.81,“pc”:187.68,“t”:1707237088}

//I’m thinking perhaps I need to stringify the object…

2

Hello and welcome!

There is to my knowledge no “src” attribute in <p>tags.

Try <p key={thePrice.c}> {thePrice.c} </p>, hope it works.

3

Sadly it does not, I’m getting the following error: TypeError: price.map is not a function

4

This error means that map() doesn’t find an array to map over.
Make sure the data you are fetching is an array.

5

You can test this by wrapping your code in a ternary and Array.isArray(data)

return (
    <div>
      {Array.isArray(data) ? (
        data.map(item => (
          // Render your items here
          <div key={item.id}>{item.name}</div>
        ))
      ) : (
        <div>No data available</div>
      )}
    </div>
  );
}
6

This is exactly what is returned< it’s an object, not an array with objects in it, so how do I parse this…?

{“c”:188.925,“d”:1.245,“dp”:0.6634,“h”:188.93,“l”:186.7695,“o”:187.81,“pc”:187.68,“t”:1707237088}

7

If you can’t fetch the data as an array (check the API), turn the object into an array by using the Object.entries and Array.from methods.


const obj = {data}
const arr = Array.from(Object.entries(obj), ([key, value]) => value)

Then map over arr.

Here’s the topic for more information.

8

Thanks so much for sharing your advice, I’ll be taking a look at this later today and will give it a shot!

9

I feel like I’m getting closer, as the console log now shows Array(0), but wouldn’t that mean there’s nothing in the array?

import { useState, useEffect } from 'react';

const Datafetch = () => {
    const [price, setPrice] = useState([]);
    useEffect(() => {
        fetch('https://finnhub.io/api/v1/quote?symbol=AAPL&token=cmhauvpr01qmgvct6qk0cmhauvpr01qmgvct6qkg')
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                //console.log(data);
                //    setPrice(data);
                const obj = { data }
                const arr = Array.from(Object.entries(obj), ([key, value]) => value)
                console.log(arr);

            });
    }, []);
    return (
        <div>
            {price.map((arr) => (
                <div key={arr.c}> {arr.c} </div>
            ))
            }
        </div >
    );
};

export default Datafetch
10

My focus is currently more on Python, a bit rusty in React.

You probably don’t need the Array.from() method at all.

Try by simply updating the state of setPrice with


   .then((data) => {
                setPrice([data]); // Update price state with fetched data
            })

Then price.map() should be working.

1 Like
11

You don’t really need a map if the data is just a single object but I guess it depends on how you are planning to render the data.

If you do want to turn it into an array I would suggest doing it inside the component (before or inside the JSX) and making the initial state an object. That way it is more clear what the API is returning.

Example 
const Datafetch = () => {
  const [price, setPrice] = useState({});

  useEffect(() => {
    fetch(
      'https://finnhub.io/api/v1/quote?symbol=AAPL&token=cmhauvpr01qmgvct6qk0cmhauvpr01qmgvct6qkg'
    )
      .then((response) => response.json())
      .then((data) => setPrice(data));
  }, []);

  return (
    <div>
      <p>Price: {price.c}</p>
      <hr />
      {Object.entries(price).map(([key, value]) => (
        <p>
          {key}: {value}
        </p>
      ))}
    </div>
  );
};

export default Datafetch;
1 Like
12

THANK YOU! :grinning: This worked, super grateful for your help! (and everyone else too!)

1 Like
13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.