javascript Map未按预期从axios返回数组

bzzcjhmw  于 2023-05-21  发布在  Java
关注(0)|答案(3)|浏览(96)

我有一个axios post调用graphQL突变。作为响应,我需要创建一个数组,但是我得到了很多undefined值。
我的代码:

const func = async (vars, update_vars) => {
  await axiosFunction({ query: create_fields, variables: vars }).then(
    (response) => {
      if (update_vars != undefined) {
        const yo = update_vars.att.map((att) => {
          if (
            att.label === response.data.label
          )
            return response.data.id;
        });
        console.log(yo);
      }
    }
  );
};

update_vars

[
  { label: 'val 1' },
  { label: 'val 2' },
  { label: 'val 3' },
  { label: 'val 4' }
]

response.data

{
  id: '112',
  other_id: '352009093',
  label: 'val 1'
}
{
  id: '113',
  other_id: '3520012',
  label: 'val 2'
}
{
  id: '152',
  other_id: '234578',
  label: 'val 13'
}

我需要yo来返回['112', '113']

30byixjq

30byixjq1#

您可以在update_vars中创建对象中所有标签属性的Set,然后基于它们创建filter响应。最后,Array#map可以用来提取匹配元素的id。

let update_vars=[{label:"val 1"},{label:"val 2"},{label:"val 3"},{label:"val 4"}],response={data:[{id:"112",other_id:"352009093",label:"val 1"},{id:"113",other_id:"3520012",label:"val 2"},{id:"152",other_id:"234578",label:"val 13"}]};
const labels = new Set(update_vars.map(o => o.label));
const res = response.data.filter(({label}) => labels.has(label)).map(o => o.id);
console.log(res);
lo8azlld

lo8azlld2#

如果我对你的问题理解正确的话,解决方案应该是这样的,显然它可以改进。

const update_var = [[
  { label: 'val 1' },
  { label: 'val 2' },
  { label: 'val 3' },
  { label: 'val 4' }
],
[
  { label: 'val 5' },
  { label: 'val 6' },
  { label: 'val 7' }
]];

var data = [{
  id: '112',
  other_id: '352009093',
  label: 'val 1'
},
{
  id: '113',
  other_id: '3520012',
  label: 'val 2'
},
{
  id: '152',
  other_id: '234578',
  label: 'val 13'
}]

const arrayFlat = update_var.flat()
const yo = []

arrayFlat.forEach(el => {
  const tmp = data.filter(e => el.label === e.label);
  if (tmp.length) {
    yo.push(tmp[0].id)
  }
});

console.log(yo)

这段代码定义了一个名为update_var的数组数组,其中包含两行对象,每行对象有四个标签键及其对应的字符串值。
然后定义数据数组,其中包含具有id、other_id和标签键及其对应的字符串值的对象。
通过对update_var数组使用flat()方法创建一个新数组,该方法将嵌套数组展平为单个数组。
声明一个名为yo的空数组。
然后,代码使用forEach()循环遍历展平的arrayFlat的每个元素,并在循环内通过将每个对象的标签键与arrayFlat中当前元素的标签键匹配来过滤数据数组。
如果有匹配项,则将筛选后的数组的第一个元素的id键的值推送到yo数组。
最后,yo阵列记录到控制台。
这段代码本质上是根据嵌套数组(update_var)中的标签列表过滤对象(数据)数组。然后输出相应的id值。

x3naxklr

x3naxklr3#

您可以使用Array#filterArray#mapArray#includes方法,如下所示:

const 
      update_vars = [
        { label: 'val 1' },
        { label: 'val 2' },
        { label: 'val 3' },
        { label: 'val 4' }
      ],
      
      response = {
        data: [
          {
            id: '112',
            other_id: '352009093',
            label: 'val 1'
          },
          {
            id: '113',
            other_id: '3520012',
            label: 'val 2'
          },
          {
            id: '152',
            other_id: '234578',
            label: 'val 13'
          }
        ]
      },
      
      uv_labels = update_vars.map(v => v.label),
      
      output = response.data
                .filter(({label}) => uv_labels.includes(label))
                .map(({id}) => id);
                
console.log( output );

相关问题