I want to display the result of a fetch and have this function to get data:
const fetchData = async (account) => {
const myData = await fetchMainnet(account);
if (myData?.items?.length) {
return myData.items.map(item => ({
name: item.1.name,
}));
}
}
Now I want to get the owner with another fetch
const fetchData = async (account) => {
const myData = await fetchMainnet(account);
if (myData?.items?.length) {
return myData.items.map(item => ({
name: item.1.name,
owner: getOwner(item.1.id),
}));
}
}
async function getOwner(id) {
let theData = await WhoIsOwner(id)
let owner = theData.data[0].intern[1].owner
return owner
} WhoIsOwner:
export const WhoIsOwner = async (id) => {
var myHeaders = new Headers();
myHeaders.append("x-api-key", "XYZ");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
var response = await fetch("URL", requestOptions)
if (response.ok) {
const data = await response.json();
return data;
}
else {
alert(`${response.status}: ${response.statusText}`);
const text = await response.text();
try {
const json = JSON.parse(text);
alert(json);
}
catch (err) {
alert(text);
}
return {
items: []
};
}
If I call the fetch in the if statement, I get the right data but I want it in the map
I am giving the data to another component like
...
return (
<div>
<Displayer data={allData}
</div>
But with that I am getting undefined for owner and if I check owner, it is a Promise