Combine result from 2 api response into one array javascript

Question

I have two different api response that I want to combine. First api response is like below

"Data1":[ 
   {
    "name": "First Officer",
    "status": "ACTIVE",
    "id": "111"
   },
   {
     "name": "Second Officer",
     "status": "DELETED",
     "id": "222"
   },
   {
     "name": "Third Officer",
     "status": "ACTIVE",
     "id": "333"
   }
 ],
 Data2[],
 Data3[]

And the second response is to get latest position of the officer like below

 [
   {
    "id": "111",
    "latest_position": "Elm Street"
   },
   {
     "id": "333",
     "latest_position": "Newton Sr. Street"
   }
 ]

I need to combine two response from API above to become one array like this

["111","First Officer","Elm Street"]
["333", "Third Officer","Newton Sr. Street"]

But what I get is data like

 ["333","Third Officer","Elm Street"]
 ["333", "Third Officer","Newton Sr. Street"]

Do you know where's the error from my code below

$.ajax({
    url: api_url+'search?keyword='+keyword,
    type: 'GET',
    success: function(response) {
        //console.log(response);
        var keys = Object.keys(response.data);
        for (var i = 0; i < keys.length; i++) {
            var data = response.data[keys[i]]
            for (var j = 0; j < data.length; j++) {
                var name = data[j].name;
                var sid = data[j].id;
            $.ajax({
                    url: api_url+'positions?filter=%7B%22where%22%3A%7B%22user_id'+sid,
                    type: 'GET',
                    success: function(response2) {
                        //console.log(response);
                        for (var i = 0; i < response2.length; i++) {
                            var loc = response2[i].latest_position;
                            var obj = {
                                'id' : sid,
                                'name' : name,
                                'loc' : loc,

                            };

                            arrObj.push(obj);

                        }
                    }
                })
            }
        }


        console.log(arrObj);

Thank you

Answer 1

Your issue stems from the fact that the second $.ajax(...) call is asynchronous and by the time its success: callback gets to be evaluated, the fors are finished, so you're getting the last values from the arrays in all of the responses.

The solution is to create a closure around the second $.ajax(....) call, so it will make the definition context available at execution time.

Something around the lines of:

$.ajax({
    url: api_url+'search?keyword='+keyword,
    type: 'GET',
    success: function(response) {
        //console.log(response);
        var keys = Object.keys(response.data);
        for (var i = 0; i < keys.length; i++) {
            var data = response.data[keys[i]]
            for (var j = 0; j < data.length; j++) {
        (function(data){
                var name = data.name;
                var sid = data.id;

            $.ajax({
                    url: api_url+'positions?filter=%7B%22where%22%3A%7B%22user_id'+sid,
                    type: 'GET',
                    success: function(response2) {
                        //console.log(response);
                        for (var i = 0; i < response2.length; i++) {
                            var loc = response2[i].latest_position;
                            var obj = {
                                'id' : sid,
                                'name' : name,
                                'loc' : loc,

                            };

                            arrObj.push(obj);

                        }
                    }
                })
              })(data[j]);
            }
        }


        console.log(arrObj);

Answer 2

You can use Array.find to search the item from the second response by id.

Something like this:

const response1 = [{
    "name": "First Officer",
    "status": "ACTIVE",
    "id": "111"
  },
  {
    "name": "Second Officer",
    "status": "DELETED",
    "id": "222"
  },
  {
    "name": "Third Officer",
    "status": "ACTIVE",
    "id": "333"
  }
];

const response2 = [{
    "id": "111",
    "latest_position": "Elm Street"
  },
  {
    "id": "333",
    "latest_position": "Newton Sr. Street"
  }
];

const merged = response2.map(item => {
  const resp1Item = response1.find(r => r.id === item.id);

  return { ...item,
    ...resp1Item
  }
});

console.log(merged);