Javascript 获取嵌套对象和数组的值-使用plunker

我有两个带有嵌套对象的数组，作为API端点调用的一部分下载，其中一个（预览）只有数字

例如：

[{
  obj1:[1, 2],
  obj2:[3, 4]
}]

[{
  obj1:[{
    id:1,
    name:'string_name1'
  }, {
    id:2, 
    name:'string_name2'
  }]
}, {
  obj2:[{
    id:3, 
    name:'string_name3'
  }, {
    id:4, 
    name:'string_name4'
  }]
}];

我不得不再次调用另一个端点，以获取带有字符串的ID列表

例如：

[{
  obj1:[1, 2],
  obj2:[3, 4]
}]

[{
  obj1:[{
    id:1,
    name:'string_name1'
  }, {
    id:2, 
    name:'string_name2'
  }]
}, {
  obj2:[{
    id:3, 
    name:'string_name3'
  }, {
    id:4, 
    name:'string_name4'
  }]
}];

我需要将ID与第一个对象编号数组相匹配，以便在我的网页上显示字符串/文本值

我有两个功能

第一个，从预览数组中提取数字，并将它们推送到我自己的可编辑数组中，我将使用该数组显示在页面上

这是函数运行前的数组

 objName = [['obj1'], ['obj2']];

这是第一个函数，将预览中的名称与数组中的名称相匹配，并推送值

    setNumbers(){
     for(let i = 0; i < this.objName.length; i++){
           for(var name in this.preview[0]) {
             if (name == this.objName[i][0]){
                  for(var val in  this.preview[0][name]) {
                       this.objName[i].push(this.preview[0][name][val])
                  }
             }

          }
     }
  this.setStrings()
}

它是有效的，但会让我的眼睛受伤，一定有更简单更干净的方法吗

Plunker链接：

---

您的数据结构不适合这种转换。例如，如果可以直接给显示字符串一个“obj”-属性和数组索引，而不必遍历数组，则会更好

无论如何，使用现有结构，您仍然可以通过使用数组函数进行改进，例如

find

和

map

：

class应用程序{
构造函数（预览、对象名、字段）{
this.preview=预览；
this.objName=objName；
this.fields=字段；
这个.setNumbers（）；
}
setNumbers（）{
this.objName=this.objName.map（arr=>arr.concat（this.preview[0][arr[0]]）；
这个.setString（）；
}
设置字符串（）{
this.objName=this.objName.map（arr=>
[arr[0].concat（arr.slice（1）.map（val=>
this.fields.find（field=>arr[0]在field中）[arr[0]]
.find（item=>item.id==val）.name
))
);
console.log（this.objName）；
}
}
变量objName=['obj1']，['obj2']，
预览=[{
obj1:[1,2]，
obj2:[3,4]
}],
字段=[{
obj1：[{
id:1，
名称：'string_name1'
}, {
id:2，
名称：'string_name2'
}]
}, {
obj2：[{
id:3，
名称：'string_name3'
}, {
id:4，
名称：'string_name4'
}]
}];
新应用程序（预览、对象名、字段）
.as console wrapper{max height:100%！important；top:0；}
您的数据结构不适合这种转换。例如，如果可以直接给显示字符串一个“obj”-属性和数组索引，而不必遍历数组，则会更好

无论如何，使用现有结构，您仍然可以通过使用数组函数进行改进，例如
find
和
map
：


class应用程序{
构造函数（预览、对象名、字段）{
this.preview=预览；
this.objName=objName；
this.fields=字段；
这个.setNumbers（）；
}
setNumbers（）{
this.objName=this.objName.map（arr=>arr.concat（this.preview[0][arr[0]]）；
这个.setString（）；
}
设置字符串（）{
this.objName=this.objName.map（arr=>
[arr[0].concat（arr.slice（1）.map（val=>
this.fields.find（field=>arr[0]在field中）[arr[0]]
.find（item=>item.id==val）.name
))
);
console.log（this.objName）；
}
}
变量objName=['obj1']，['obj2']，
预览=[{
obj1:[1,2]，
obj2:[3,4]
}],
字段=[{
obj1：[{
id:1，
名称：'string_name1'
}, {
id:2，
名称：'string_name2'
}]
}, {
obj2：[{
id:3，
名称：'string_name3'
}, {
id:4，
名称：'string_name4'
}]
}];
新应用程序（预览、对象名、字段）
.as console wrapper{max height:100%！important；top:0；}
如果将其分解为更小的部分，则执行此操作更简单、更干净：


让objsToMap=[{
obj1:[1,2,7]，
obj2:[3,4]，
obj3:[1,2]
}]
设objvalue=[{
obj1：[{
id:1，
名称：'string_name1'
}, {
id:2，
名称：'string_name2'
}]
}, {
obj2：[{
id:3，
名称：'string_name3'
}, {
id:4，
名称：'string_name4'
}]
}];
函数findValueForId（objDef，id）{
让idKeyMap=objDef.find（item=>item.id==id）；
返回idKeyMap？idKeyMap.name：空；
}
函数findObjectValues（值映射，键）{
让objectWithObjectValues=valueMapping.find（item=>key in item）；
返回objectWithObjectValues？objectWithObjectValues[键]：null；
}
//返回一个数组，该数组包含键，后跟与指定ID对应的值
函数lookupObject（键、ID、值映射）{
设objDef=findObjectValues（valueMapping，key）| |[]；
让valuesForIds=ids.map（id=>findValueForId（objDef，id））；
让valuesWithoutBlanks=valuesForIds.filter（value=>value）；
返回[key].concat（值不带空格）；
}
让result=Object.entries（objsToMap[0]）.map（[k，v]）=>lookupObject（k，v，objValues））；
控制台日志（结果）如果将其分解为更小的部分，则执行此操作更简单、更干净：


让objsToMap=[{
obj1:[1,2,7]，
obj2:[3,4]，
obj3:[1,2]
}]
设objvalue=[{
obj1：[{
id:1，
名称：'string_name1'
}, {
id:2，
名称：'string_name2'
}]
}, {
obj2：[{
id:3，
名称：'string_name3'
}, {
id:4，
名称：'string_name4'
}]
}];
函数findValueForId（objDef，id）{
让idKeyMap=objDef.find（item=>item.id==id）；
返回idKeyMap？idKeyMap.name：空；
}
函数findObjectValues（值映射，键）{
让objectWithObjectValues=valueMapping.find（item=>key in item）；
返回objectWithObjectValues？objectWithObjectValues[键]：null；
}
//返回一个数组，该数组包含后跟值的键