How can I map this join data in React JS

Question

I have two API Data I am using. I am trying to map the data as list item. I am also trying to map the correct logo for the correct item using productCode as a matching point. How can I achieve this? I have attached my code below. Each item must have the logo, the amount, and productCode. Please if there is also a better way to merge the two API, I would be happy to learn....

export default function App() {

  const [Alldata, setAlldata] = useState([]);
  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch("http://localhost:1337/api/rows/")
      .then((response) => response.json())
      .then((json) => setAlldata(json));
    // empty dependency array means this effect will only run once (like componentDidMount in classes)
  }, []);

  const token = "TOKEN HERE";
  const [result, setResult] = useState([]);

  useEffect(() => {
    fetch(
      "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/",
      {
        method: "GET",
        headers: { Authorization: `Bearer ${token}` },
      }
    )
      .then((res) => res.json())
      .then((json) => setResult(json));
  }, []);

  const mainDATA = {result, Alldata};
  console.log(mainDATA);


  return (
    <div>App</div>
  )
}

How do these two APIs relate to one another? In other words, how does the data they fetch and get stored in state relate? Are they a 1-to-1 relation and you just need to merge two arrays? Do you need to look up data from one array in the other? What have you tried already on your own? — Drew Reese
– Drew Reese, Commented May 4, 2022 at 16:10

Ben Clayton · Accepted Answer · 2022-05-04 12:20:55Z

2

First up:

  useEffect(() => {
    setProducts(result.result);
  });

.. is likely to cause an infinite loop as it'll run on every render. Calling setProducts will queue a new render, that'll re-run useEffect etc, that'll queue a new render etc.

I think you can leave out this useEffect and simply use:

useEffect(() => {
    fetch(
      "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/",
      {
        method: "GET",
        headers: { Authorization: `Bearer ${token}` },
      }
    )
      .then((res) => res.json())
      .then((json) => setProducts(json?.result));
  }, []);

.. to write direct to the products state.

Then (assuming that products is an array, and you have a component ProductItem that can render it) you'd write something like:

return (
<div>
{ products.map( product => <ProductItem key={product.id} product={product}/> ) }
</div>
  )

edited May 4, 2022 at 12:20

answered May 4, 2022 at 11:11

Ben Clayton

82.4k26 gold badges123 silver badges129 bronze badges

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

4 Comments

Manasseh Codes Over a year ago

how do i map the data?

Ben Clayton Over a year ago

I'm not sure what's in your data, but in the JSX part you'd write something like: { products.map(product => <div key={product.id}>YOUR PRODUCT COMPONENT HERE</div>}

Manasseh Codes Over a year ago

Oh, I have updated the code. I need to map data inside mainDATA. There are two objects inside it. It is the combine data from the two APIs. mainDATA = {results, AllData}. I want to map inside mainDATA. Then fetch items inside the two items in it. For example. <p>Code: {mainDATA.results.productCode}</p> <img>Img: {mainDATA.AllData.data.attributes.logo}</img> I hope it make sense

Manasseh Codes Over a year ago

This is what I have tried. <div>{mainDATA.map( item => <p >{mainDATA.Alldata.data.attributes.Country}</p> )} </div>`

Collectives™ on Stack Overflow

How can I map this join data in React JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related