How to map API with multiple objects in [Javascript, ES6]

Question

I am working on the domain API I would like to display domain names and prices at the same time but They are in two different object. I always get undefined when I use this. So If I dataArray[0] or dataArray[1] can get all the result only cannot get both. Thank you for the help.

domain.Name inside of data.Domains object

domain.PriceInfo inside of data.Prices object.

const displayDomains = (data) => {
const dataArray = [data.Domains, data.Prices];

const htmlString = dataArray[(0, 1)]
  .map((domain) => {
    return `<div class="domains">
      <h2>${domain.Name}</h2>
          <div class="domain-price-container">
              <sub class="discount-price">${domain.PriceInfo}</sub>
          </div>
    </div>`;
  })
  .join('');

Does this answer your question? [How do I zip two arrays in JavaScript?](https://stackoverflow.com/questions/22015684/how-do-i-zip-two-arrays-in-javascript) — evolutionxbox, Feb 24 '21 at 17:52
I was goingt o post this as an answer but it got closed, so hope this looks okay as a comment: — TKoL, Feb 24 '21 at 17:54
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map The second argument passed into the `.map` callback is the index. That allows you to do something like this: ``` data.Domains.map((domain, index) => { price = data.Prices[index]; return <>; // whatever JSX you want here, including both domain and price information }) ``` — TKoL, Feb 24 '21 at 17:54

score 0 · Answer 1 · answered Feb 24 '21 at 18:21

If data.Domains and data.Prices are equal length arrays, then a straight forward workaround would be to simply loop over both arrays with common index,

const dataArray = [data.Domains, data.Prices];
let index = 0;
let htmlString = [];
for(index; index < sizeOfArray; index++) {
    htmlString.push(
       <div class="domains">
         <h2>${dataArray[0][index].Name}</h2>
         <div class="domain-price-container">
           <sub class="discount-price">${dataArray[1][index].PriceInfo}</sub>
         </div>
       </div>
    );
}

If both arrays have different sizes, insert all common elements upto smaller sizes out of two, and next insert leftover elements.

score 0 · Answer 2 · answered Feb 25 '21 at 14:19

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

The second argument passed into the .map callback is the index. That allows you to do something like this:

data.Domains.map((domain, index) => {
   const price = data.Prices[index];
   return <>; // whatever JSX you want here, including both domain and price information
})`

How to map API with multiple objects in [Javascript, ES6]

2 Answers2