Hey Everyone! I was doing an assessment, which I timed out on, but would love to solve it anyways as I find it to be great JavaScript/React practice. Dying to get it too work… lol
I am trying to map data from 2 different api calls onto one card. I first got the ids of orders to match the ids in the 2nd API call. I am able to map the data of the workers(2nd fetch call), but I can not map the data of orders (my first fetch).
The corresponding matching work id and order id should be mapped onto one card… totally scratching my head on this one.
import React, { useEffect, useState } from "react";
import CardUI from "./CardUI";
const CardContainer = () => {
const [work, setWork] = useState([]);
const [work2, setWork2] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetch("https://www.hatchways.io/api/assessment/work_orders")
.then((response) => response.json())
.then((data) => {
setWork(data.orders);
// console.log(data.orders);//rtns an array of orders
// map through the array of orders to get working matching workerIds
const respones = data.orders.map((order) =>
fetch(
`https://www.hatchways.io/api/assessment/workers/${order.workerId}`
).then((res) => res.json())
);
// console.log(respones); //rtns promisees
Promise.all(respones).then((fetchedOrders) => {
setWork2(fetchedOrders);
console.log(fetchedOrders); //rts an array of workers
setIsLoading(false);
});
});
}, []);
return isLoading ? (
<div>Loading</div>
) : (
<div>
<h2>Cards</h2>
{work2.map((item, index) => (
<CardUI key={index} props={item} />
))}
</div>
);
};
export default CardContainer;
both api calls should be mapped and one cardUI… I hope this makes sense. I am super confused myself.
thanks . I actually saw that link a few days ago. That isn’t same problem I am having. I have my workers IDs, and they map to my UI, but I cant’t map my orders IDs into the card which was used to get the workes IDs.
so after making my first fetch to the orders api, I was able to use the orders id to get the data for workers id. the issue is I am only able to map the workers ids… when I need to map matching orders and workers ids to a card.
If you want to pass two props then you should do that: <CardUI key={index} prop1={item} prop2={work[index]} />
then in your Card you should pass the two props.
If that didn’t work for you then add the project to repple or glitch or github and give me the link so i can show exactly what you do.
As I said before the problem in CardUI you didn’t handle the props well.
First: in cardContainer make that choose well props name as @lasjorg said and each data you want to pass add it as props like that:
Hey guys Its been solved!!! I was racking my brain… reading the code over and over again! I got it now. I needed to add one more .then to pass on the data: then((res) => res.json()) .then(({worker}) => ({worker, order}))