遍历两个数组时选择输出答案

【问题标题】：Selecting the output when iterating through two arrays遍历两个数组时选择输出
【发布时间】：2019-03-17 16:14:30
【问题描述】：

因此，当我在 js 中遍历我的两个 arrays(associative) 并将输出附加到我的表中时，我得到 3 undefined。输出如下所示： Output

您可以在控制台中看到迭代是连续发生的，这就是为什么考虑到数组的性质，我会得到未定义的值

这是对我的控制器的 jQuery 调用，在这里我得到了我的两个数组：

function getArtworks() {
  $.ajax({
    type: 'GET',
    url: './index.php/Controller/getArtworks',
    dataType: 'json',
    success: function (jsonData) {
      showArtsInTable(jsonData);
      console.log(jsonData);
    },
    error: function () {
      alert('Error :' + jsonData);
    }
  });
}

这是我遍历我的数组并附加到我的表的地方：

function showArtsInTable(jsonData) {
  let table = $('#tblArt');
  $('#artForm').hide();
  table.empty();
  table.append('<thead>');
  table.append('<tr>');
  table.append('<th>Namn</th>');
  table.append('</tr>');
  table.append('</thead>');
  $.each(jsonData, function() {
    $.each(this, function(i, value) {
      console.log(value);
      table.append('<tbody>');
      table.append('<tr>');
      table.append(
        "<td><a href='#' onclick=getArtworkByID('" +
          value['ID'] +
          "')>" +
          value['NAME'] +
          '</a></td>'
      );
      table.append('</tr>');
      table.append('</tbody>');
      table.append('<tr>');
      table.append('<td>' + value['MAX(BID)'] + '</td>');
      table.append('</tr>');
    });
  });
}

字符串化控制台日志：

[
    {
      "ID": "1",
      "NAME": "Chaviour",
      "CATID": ""
    },
    {
      "ID": "2",
      "NAME": "simpleDrop",
      "CATID": ""
    },
    {
      "ID": "3",
      "NAME": "Chattash",
      "CATID": "Janne"
    },
],
[
    {
      "ID": "1",
      "DATE": "2019-03-16 19:39:06",
      "MAX(BID)": "7500"
    },
    {
      "ID": "2",
      "DATE": "2019-03-16 19:39:06",
      "MAX(BID)": "5000"
    },
    {
      "ID": "3",
      "DATE": "2019-03-16 20:55:48",
      "MAX(BID)": "9000"
    }
]

我只希望我的表格在“名称”和“投标”列下附加值。我该怎么办？

【问题讨论】：

我希望我正确解释了您的评论。

标签： javascript arrays loops append output

【解决方案1】：

我想我明白你想要什么。

只是检查一下，您想要以下输出吗？

姓名 |出价

司机 | 7500

simpleDrop | 5000

聊天 | 9000

您需要先通过 ID 连接您的数据：

const data = [
     [
        {
          "ID": "1",
          "NAME": "Chaviour",
          "CATID": ""
        },
        {
          "ID": "2",
          "NAME": "simpleDrop",
          "CATID": ""
        },
        {
          "ID": "3",
          "NAME": "Chattash",
          "CATID": "Janne"
        },
    ],
    [
        {
          "ID": "1",
          "DATE": "2019-03-16 19:39:06",
          "MAX(BID)": "7500"
        },
        {
          "ID": "2",
          "DATE": "2019-03-16 19:39:06",
          "MAX(BID)": "5000"
        },
        {
          "ID": "3",
          "DATE": "2019-03-16 20:55:48",
          "MAX(BID)": "9000"
        }
    ]
]

const tidyData = data[0].map((a) => {
  // find the matching item by ID
  let match = data[1].find((b) => b.ID === a.ID) || {}
  // return the union
  return {
    ...a,
    ...match,
  }
})

console.log(tidyData);

这会返回以下数据，从这里应该很容易在表格中显示：

[
    {
        "ID": "1",
        "NAME": "Chaviour",
        "CATID": "",
        "DATE": "2019-03-16 19:39:06",
        "MAX(BID)": "7500"
    },
    {
        "ID": "2",
        "NAME": "simpleDrop",
        "CATID": "",
        "DATE": "2019-03-16 19:39:06",
        "MAX(BID)": "5000"
    },
    {
        "ID": "3",
        "NAME": "Chattash",
        "CATID": "Janne",
        "DATE": "2019-03-16 20:55:48",
        "MAX(BID)": "9000"
    }
]

【讨论】：

美丽。谢谢！