如何用JavaScript或jQuery从API返回数据中提取wastageName列表

首先要明确：你从接口拿到的是JSON数据，不是DOM元素，之前的代码错误在于把data当成了DOM选择器来使用，这和处理JSON数据的逻辑完全不匹配。下面分别用原生JavaScript和jQuery给出正确实现：

原生JavaScript实现 #

方式1：用map方法（最简洁） #

直接对JSON中的data数组做映射提取：

// 假设接口返回的JSON已解析为JS对象，若未解析先执行JSON.parse(接口返回字符串)
const apiResponse = {"data":[{"id":1,"wastageName":"BOPP at printing"},{"id":3,"wastageName":"BOPP Production wastage"},{"id":18,"wastageName":"LDPEE at leminatign"}]};
const wastageNameList = apiResponse.data.map(item => item.wastageName);
console.log(wastageNameList);
// 输出结果：["BOPP at printing", "BOPP Production wastage", "LDPEE at leminatign"]

方式2：用for循环遍历 #

如果习惯传统循环写法：

const apiResponse = {"data":[{"id":1,"wastageName":"BOPP at printing"},{"id":3,"wastageName":"BOPP Production wastage"},{"id":18,"wastageName":"LDPEE at leminatign"}]};
const wastageNameList = [];
for (let i = 0; i < apiResponse.data.length; i++) {
  wastageNameList.push(apiResponse.data[i].wastageName);
}
console.log(wastageNameList);

jQuery实现（使用each方法） #

直接遍历JSON中的data数组，而非DOM元素：

const apiResponse = {"data":[{"id":1,"wastageName":"BOPP at printing"},{"id":3,"wastageName":"BOPP Production wastage"},{"id":18,"wastageName":"LDPEE at leminatign"}]};
const wastageNameList = [];
$.each(apiResponse.data, function(index, item) {
  wastageNameList.push(item.wastageName);
  console.log(index + ": " + item.wastageName);
});
console.log(wastageNameList);

内容的提问来源于stack exchange，提问作者Toha