Объединить результат из 2 API-ответ в один массив JavaScript

Question

У меня есть два разных ответа API, которые я хочу объединить.Первый ответ API выглядит следующим образом:

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

А второй ответ - получить последнюю должность офицера, как показано ниже

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

Мне нужно объединить два ответа из API выше, чтобы стать одниммассив вроде этого

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

Но я получаю такие данные, как

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

Знаете ли вы, где ошибка из моего кода ниже

$.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);

Спасибо

Answer 1

Вы можете использовать Array.find для поиска элемента из второго ответа по id.

Примерно так:

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);

Answer 2

Ваша проблема связана с тем, что второй вызов $.ajax(...) является асинхронным, и к тому времени, когда его обратный вызов success: должен быть оценен, for s завершены, поэтому вы получаете последние значения измассивы во всех ответах.

Решение состоит в том, чтобы создать замыкание вокруг второго вызова $.ajax(....), чтобы он сделал контекст определения доступным во время выполнения.

Что-то похожее на:

$.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);