Question 43177 in Html Question posted in
Some basic documentation can be found here.

How can I use map inside an array which has another arrray? – Html

Actually I am using Rapid API for my college project and want to display the flights tickets according the given departure date and return date. The response is something like this the response results image I just want to display the purchaseLinks array information, basically I want to map both the flights and purchaseLinks array every purchaseLinks has got 17 keys
I would mostly wrap all the info in a bootstrap card for good UI

I know this is wrong but I just tried doing this

fetch(mainUrl, options)
    .then(response => response.json())
    .then(response => {
        const res = response.data.flights.purchaseLinks.map(e => e.commerceName);
        console.log(res);
    //console.log(response.data.flights[0].purchaseLinks[0].commerceName)
  })

I tried console logging just the first one it was pretty simple to do but just like that I want to do for all the info in the given result json. I am really stuck out here is there any possible way to do this ? If yes please guide your fellow junior
Thank you 🙂

Tags:

2

Answers


  1. 0 
    const res = response.data.flights.map(f => f.purchaseLinks.map(e => e.commerceName));

    if you need 2d array and

    const res = response.data.flights.flatMap(f => f.purchaseLinks).map(e => e.commerceName));

    for 1d

    Login or Signup to reply.
  2. 0

    If purchaseLinks array will always contains a single object. In that case you can simply apply the .map method on flights array and then access the purchaseLinks array object using zero index.

    Live Demo :

    const flights = [{
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Alpha'
  }]
}, {
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Beta'
  }]
}, {
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Gamma'
  }]
}, {
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Abc'
  }]
}, {
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Xyz'
  }]
}];

const link = flights.map(obj => obj.purchaseLinks[0].commerceName);

console.log(link);

    If purchaseLinks contains multiple objects, Then you can use two map to get all the commerceName.

    Live Demo :

    const flights = [{
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Alpha'
  }, {
    commerceName: 'A1'
  }]
}, {
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Beta'
  }, {
    commerceName: 'B1'
  }]
}, {
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Gamma'
  }, {
    commerceName: 'G1'
  }]
}, {
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Abc'
  }]
}, {
  segemtns: [],
  purchaseLinks: [{
    commerceName: 'Xyz'
  }]
}];

const link = flights.map(obj => {
    return obj.purchaseLinks.map(linkObj => linkObj.commerceName)
});

console.log(link.flat());
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search