blocks|key|2499399|text|如果您只想将姓名和年龄显示为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2499400|[
{
+++"name":+"A",
+++"age":+"10",
},
{
+++"name":+"B",
+++"age":+"20",
}
]|code-block|syntax|javascript|2499401|可以使用Array.map|offset|length|style|CODE|2499402|然后你可以这样写你的代码|2499403|​|2499404|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()|2499405|2499406|这回答了你的问题吗？|2499407|entityMap^0|0|0|4|9|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@$I|10|J|11|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|13|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|S|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|16|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>If you want to show only name and age as</p>

<pre><code>[
{
   "name": "A",
   "age": "10",
},
{
   "name": "B",
   "age": "20",
}
]
</code></pre>

<p><code>Array.map</code> can be used</p>

<p>and then you can write your code this way</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
        if (res.code == 200) {
            console.log(
                res.data.list.map(item =&gt; {
                    return {
                        name: item.name,
                        age: item.age
                    }
                })
            )
        }
    })
}
init()</code></pre>
</div>
</div>
</p>

<p>Does this answer your question?</p>


blocks|key|2286959|text|通过迭代show+(而不是硬编码name和age)，如果您更改模板的结构，此代码也可以工作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2286960|​|2286961|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);|code-block|syntax|javascript|2286962|2286963|entityMap^0|4|4|G|4|L|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|O|$]]

<p>By iterating <code>show</code> (rather than hard-coding <code>name</code> and <code>age</code>), this code would work also if you change the structure of your template:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
  var curr = {};
  data[0].data.show.forEach(prop =&gt; {
    curr[prop] = item[prop];
  });
  return curr;
});

console.log(ans);</code></pre>
</div>
</div>
</p>


blocks|key|2287005|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2287006|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();|code-block|syntax|javascript|2287007|2287008|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
    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();</code></pre>
</div>
</div>
</p>


blocks|key|2499515|text|可以在data上使用.map，如果代码不是200，则返回false；如果代码是200，则可以返回list数组的映射版本。您可以将此数组映射到列表中每个对象的子集。子集由您的show数组定义，因此您可以在此数组上使用.reduce()来构建映射对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2499516|如下例所示：|2499517|​|2499518|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());|code-block|syntax|javascript|2499519|2499520|或者，比映射原始数据更好的方法是使用.reduce()。这将创建一个一维数组的结果：|2499521|2499522|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"
++++]
++}
},
{
++"code":+"200",
++"msg":+"success",
++"data":+{
++++"list":+[{
++++++"name":+"C",
++++++"age":+"30",
++++++"logo":+"aa.png",
++++++"note":+"aa"
++++},+{
++++++"name":+"D",
++++++"age":+"40",
++++++"logo":+"bb.png",
++++++"note":+"bb"
++++}],
++++"show":+[
++++++"name",
++++++"age"
++++]
++}
}];



function+init()+{
++return+data.reduce((acc,+res)+=>+{
++++if+(res.code+==+200)+{
++++++return+[...acc,+...res.data.list.map((obj)+=>+{
++++++	return+res.data.show.reduce((acc,+prop)+=>+({...acc,+[prop]:+obj[prop]}),+{});
++++++})];
++++}
++++return+acc;
++},+[]);
}

console.log(init());|2499523|2499524|entityMap^0|3|4|A|4|S|5|1C|4|2E|4|2Z|9|0|0|0|0|0|I|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|R|3|I|5|6|7|1H|8|@]|D|@]|E|$]]|$1|S|3|T|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|U|3|I|5|6|7|1J|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|W|$]]

<p>You can use <code>.map</code> on your <code>data</code> and return <code>false</code> if the code isn't 200, if it is 200, you can return a mapped version of your <code>list</code> array. You can map this array to a subset of each object in your list. The subset is defined by your <code>show</code> array, and so you can use <code>.reduce()</code> on this array to build your mapped object. </p>

<p>See example below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
    if (res.code == 200) {
      return res.data.list.map((obj) =&gt; {
      	return res.data.show.reduce((acc, prop) =&gt; ({...acc, [prop]: obj[prop]}), {});
      });
    }
    return false;
  }).filter(Boolean); // filter out any `false` returns
}

console.log(init());</code></pre>
</div>
</div>
</p>

<p>Alternatively, a better approach than mapping your original data would be to use <code>.reduce()</code>. This will create a one-dimensional array of results:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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"
    ]
  }
},
{
  "code": "200",
  "msg": "success",
  "data": {
    "list": [{
      "name": "C",
      "age": "30",
      "logo": "aa.png",
      "note": "aa"
    }, {
      "name": "D",
      "age": "40",
      "logo": "bb.png",
      "note": "bb"
    }],
    "show": [
      "name",
      "age"
    ]
  }
}];



function init() {
  return data.reduce((acc, res) =&gt; {
    if (res.code == 200) {
      return [...acc, ...res.data.list.map((obj) =&gt; {
      	return res.data.show.reduce((acc, prop) =&gt; ({...acc, [prop]: obj[prop]}), {});
      })];
    }
    return acc;
  }, []);
}

console.log(init());</code></pre>
</div>
</div>
</p>


blocks|key|2499535|text|您可以以一种更简单的方式使用reduce：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2499536|​|2499537|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),+{})
));|code-block|syntax|javascript|2499538|2499539|entityMap^0|E|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|T|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|O|$]]

<p>You can use <code>reduce</code> in a shorter way:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt;
  data[0].data.show.reduce((p, c) =&gt; ((p[c] = x[c]), p), {})
));</code></pre>
</div>
</div>
</p>


<p>I am trying to traverse the data according to the <code>show</code> array and print the data to see if it is correct. To traverse the <code>list</code> array corresponding to the <code>show</code> array as follows</p>

<p><strong>I want the effect as follows:</strong></p>

<pre><code>[
  {
   "name": "A",
   "age": "10",
  },
  {
   "name": "B",
   "age": "20",
  }
]
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
    if (res.code == 200) {
      console.log(res.data.list)
    }

  })
}
init();</code></pre>
</div>
</div>
</p>


How to traverse data according to an array?

我尝试根据show数组遍历数据，并打印数据以查看其是否正确。遍历与show数组对应的list数组，如下所示我想要的效果如下：[  {   "name": "A",   "age": "10",  },  {   "name": "B",   "age": "20",  }]​const data = [{  "code...

问如何根据数组遍历数据？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据数组遍历数据？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据数组遍历数据？
EN