将 2 个 api 响应的结果合并为一个数组 javascript答案

【问题标题】：Combine result from 2 api response into one array javascript将 2 个 api 响应的结果合并为一个数组 javascript
【发布时间】：2019-09-19 06:55:58
【问题描述】：

我有两个不同的 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);

谢谢

【问题讨论】：

标签： javascript arrays ajax

【解决方案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);

【讨论】：

嗨@felixmosh，谢谢你的提示，现在我找到了正确的方法

【解决方案2】：

您的问题源于这样一个事实，即第二个 $.ajax(...) 调用是异步的，并且在评估其 success: 回调时，fors 已完成，因此您从所有响应中的数组。

解决方案是在第二个$.ajax(....) 调用前后创建一个closure，这样它就可以在执行时提供定义上下文。

大概是这样的：

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

【讨论】：