how to iterate over two responses one after another using javascript

Question

I am initialized one variable with two responses from two async calls like this below.

const items = await service.fetchDropdownFieldItems(payload.url);

It is storing the responses one after another and it is working fine. Those responses are like below:

1st response :  [{id:1, value:'Shoe'},{id:2,value:'Boutique'},{id:3,value:'Clothing'}]

2nd response:   {data:[{country_id:1, country_name:'Australia'},{country_id:2,country_name:'France'},{country_id:3,country_name:'USA'}]}

Now, i want to format 2nd response's data array and replace the 2nd response with my formatted response.

Now, if i check items variable it should contain like this

1st response :  [{id:1, value:'Shoe'},{id:2,value:'Boutique'},{id:3,value:'Clothing'}]

2nd response:   [{id:1, value:'Australia'},{id:2, value:'France'},{id:3, value:'USA'}]}

Any approach for doing like this. There is no issue on async call or url etc. Only i want to change the response and replace with old one.

Do you just want to change the keys names in your second array? [Changing the key name in an array of objects?](https://stackoverflow.com/q/6809659) If so, I don't see what the relevance is of the first array to the question? Is the first array supposed to be used in a particular way? — Nick Parsons, Apr 18 '21 at 07:33
I am storing two responses into one variable one after another. How to map two responses with id ? Then 2nd response will replace with formatted response. — learningMonk, Apr 18 '21 at 14:13

L.Blondy · Answer 1 · 2021-04-18T16:03:09.823

1

const formattedResponse = response.data.map((entry)=>({
    id: entry.country_id,
    value: entry.country_name
} ) )

you might place this logic somewhere inside service.fetchDropdownFieldItems, so you don't need to manually change your data everytime you fetch the items

Edit

Here is an example of how to use it inside a fetching function. You can change fetch with axios if you prefer

const formatResponse=(data)=>{
    return data.map((entry)=>({
        id: entry.country_id,
        value: entry.country_name
    } ) )
}

const fetchDropdownFieldItems =(url, options={})=>{
    return fetch(url, options)
        .then(res=> res.json())
        .then(res=>res.data)
        .then(formatResponse) //shorthand for .then(data=> formatResponse(data)
}

Use it as follows:

fetchDropdownFieldItems(...).then(doSomething)

//same as
fetchDropdownFieldItems(...).then(formattedData => doSomething(formattedData))

edited Apr 18 '21 at 16:03

answered Apr 18 '21 at 07:46

L.Blondy

277
1
6

Thanks for your response. How to place the logic somewhere there? Can you just give any example? – learningMonk Apr 18 '21 at 15:12
Yes i want this approach. – learningMonk Apr 18 '21 at 15:12
I added an example to the answer – L.Blondy Apr 18 '21 at 16:06
Not sure how **service.fetchDropdownFieldItems(payload.url)** was implemented, might be helpful to see the code in order to provide the best solution – L.Blondy Apr 18 '21 at 16:16
See this question.... Here is the order.... You are correct that logic i want to implement somewhere in between service and action.https://stackoverflow.com/questions/67089921/reusable-dropdown-fields-in-form-component-using-vuex-and-vue – learningMonk Apr 18 '21 at 17:02
The cleanest approch is probably to have 2 different fetching functions: `const items = await url === '...' ? service.fetchItemsOfDrowdown1(url) : service.fetchItemsOfDrowdown2(url) ` (syntax has to be improved but I hope you get the idea) – L.Blondy Apr 18 '21 at 17:22

Sanskar Dahiya · Answer 2 · 2021-04-18T09:12:49.073

0

const processData = (response) => {
 const dataArray = [];
  response.data.forEach(({country_id,country_name})=>{
   dataArray.push({ id: country_id, value: country_name });
  })
 return dataArray;
}

This answer is the same as previous one but, takes less time to execute, and a little bit optimized

or also be used as

const processData = (response) => {
  return response.data.map(({country_id,country_name})=>({ id: country_id, value: country_name }))
}

edited Apr 18 '21 at 09:12

answered Apr 18 '21 at 08:47

Sanskar Dahiya

151
8

if you're returning an array from looping an array, use [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Filter), [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Map) or [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce), it make things so much simpler – balexandre Apr 18 '21 at 08:55

score 0 · Answer 3 · answered Apr 18 '21 at 08:51

0

[].map should do the trick

const res2 = {
  data: [{
    country_id: 1,
    country_name: 'Australia'
  }, {
    country_id: 2,
    country_name: 'France'
  }, {
    country_id: 3,
    country_name: 'USA'
  }]
}

const result2 = res2.data.map(v => ({
  id: v.country_id,
  value: v.country_name
}))
console.log(result2)

answered Apr 18 '21 at 08:51

Medet Tleukabiluly

11,662
3
34
69

Thanks for your response. How to map over two responses with id 0 and 1 . Because i am storing two responses into one items variable.? Anything i can do for this?? – learningMonk Apr 18 '21 at 14:04

how to iterate over two responses one after another using javascript

3 Answers3

Edit