Question

我正在尝试根据show数组遍历数据并打印数据以查看其是否正确。要遍历与list数组相对应的show数组，如下所示：

我想要的效果如下：

[
  {
   "name": "A",
   "age": "10",
  },
  {
   "name": "B",
   "age": "20",
  }
]

const data = [{
  "code": "200",
  "msg": "success",
  "data": {
    "list": [{
      "name": "A",
      "age": "10",
      "logo": "aa.png",
      "note": "aa"
    }, {
      "name": "B",
      "age": "20",
      "logo": "bb.png",
      "note": "bb"
    }],
    "show": [
      "name",
      "age"
    ]
  }
}]



function init() {
  data.map(res => {
    if (res.code == 200) {
      console.log(res.data.list)
    }

  })
}
init();

Answer 1

通过迭代show（而不是对name和age进行硬编码），如果您更改模板的结构，此代码也将起作用：

const data = [{
  "code": "200",
  "msg": "success",
  "data": {
    "list": [{
      "name": "A",
      "age": "10",
      "logo": "aa.png",
      "note": "aa"
    }, {
      "name": "B",
      "age": "20",
      "logo": "bb.png",
      "note": "bb"
    }],
    "show": [
      "name",
      "age"
    ]
  }
}];

var ans = data[0].data.list.map(item => {
  var curr = {};
  data[0].data.show.forEach(prop => {
    curr[prop] = item[prop];
  });
  return curr;
});

console.log(ans);

Answer 2

您可以更短地使用reduce：

const data = [
  {
    code: "200",
    msg: "success",
    data: {
      list: [
        {
          name: "A",
          age: "10",
          logo: "aa.png",
          note: "aa"
        },
        {
          name: "B",
          age: "20",
          logo: "bb.png",
          note: "bb"
        }
      ],
      show: ["name", "age"]
    }
  }
];

console.log(data[0].data.list.map(x =>
  data[0].data.show.reduce((p, c) => ((p[c] = x[c]), p), {})
));

Answer 3

const data = [{
  "code": "200",
  "msg": "success",
  "data": {
    "list": [{
      "name": "A",
      "age": "10",
      "logo": "aa.png",
      "note": "aa"
    }, {
      "name": "B",
      "age": "20",
      "logo": "bb.png",
      "note": "bb"
    }],
    "show": [
      "name",
      "age"
    ]
  }
}];

function init() {
  data.map(res => {
    if (res.code == 200) {
      console.log(res.data.list.map(function(listValue) {
        var ret = {};
        res.data.show.forEach(function(idx) {
          ret[idx] = listValue[idx]
        });
        return ret;
      }));
    }

  })
}
init();

Answer 4

您可以在.map上使用data，如果代码不是200，则返回false；如果代码不是200，则可以返回{{1} }数组。您可以将此数组映射到列表中每个对象的子集。该子集由您的list数组定义，因此您可以在此数组上使用show来构建映射对象。

请参见以下示例：

.reduce()

或者，比映射原始数据更好的方法是使用const data = [{ "code": "200", "msg": "success", "data": { "list": [{ "name": "A", "age": "10", "logo": "aa.png", "note": "aa" }, { "name": "B", "age": "20", "logo": "bb.png", "note": "bb" }], "show": [ "name", "age" ] } }]; function init() { return data.map(res => { if (res.code == 200) { return res.data.list.map((obj) => { return res.data.show.reduce((acc, prop) => ({...acc, [prop]: obj[prop]}), {}); }); } return false; }).filter(Boolean); // filter out any `false` returns } console.log(init());。这将创建一维结果数组：

.reduce()

Answer 5

如果您只想显示姓名和年龄为

[
{
   "name": "A",
   "age": "10",
},
{
   "name": "B",
   "age": "20",
}
]

Array.map可以使用

然后您可以用这种方式编写代码

const data = [
    {
        code: '200',
        msg: 'success',
        data: {
            list: [
                {
                    name: 'A',
                    age: '10',
                    logo: 'aa.png',
                    note: 'aa'
                },
                {
                    name: 'B',
                    age: '20',
                    logo: 'bb.png',
                    note: 'bb'
                }
            ],
            show: ['name', 'age']
        }
    }
]

function init() {
    data.map(res => {
        if (res.code == 200) {
            console.log(
                res.data.list.map(item => {
                    return {
                        name: item.name,
                        age: item.age
                    }
                })
            )
        }
    })
}
init()

这能回答您的问题吗？

如何根据数组遍历数据？

5 个答案: