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

Question

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

示例:

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

我必须对另一个端点进行第二次调用，以获取带有字符串的 ID 列表

示例:

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

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

我有2个功能

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

这是函数运行前的数组

 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()
}

第二个将字段中的 ID 与 objName 中的数字进行匹配，并替换为字符串值

public setStrings(){
  let feildId, feildName;
    for(let i = 0; i < this.fields.length; i++){
      var obj = this.fields[i]
        for(var name in obj) {
          if(this.objName[i][0] == name){
              for(let j = 0; j < obj[name].length; j++){
                feildId = obj[name][j].id
                feildName = obj[name][j].name;
                  for(let x = 0; x < this.objName[i].length; x++){
                    if (this.objName[i][x] == feildId){
                       var index = this.objName[i].indexOf(feildId)
                         if (index !== -1) {
                              this.objName[i][index] = feildName;
                          }

                    }
                  }
              }
          }
        }
    }

console.log(this.objName)
  }

用于输出的 objName 数组最终看起来像:

[['obj1', 'string_name1', 'string_name2'], ['obj2', 'string_name3', 'string_name4']]

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

笨蛋链接: https://plnkr.co/edit/KBDu3ZehHl04er6eut6r?p=preview

Answer 1

您的数据结构不适合这种转换。例如，如果可以直接给定“obj”属性和数组索引来寻址显示字符串，而不必遍历数组，那就更好了。

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

class App {
    constructor(preview, objName, fields) {
        this.preview = preview;
        this.objName = objName;
        this.fields = fields;
        this.setNumbers();
    }

    setNumbers() {
        this.objName = this.objName.map( arr => arr.concat(this.preview[0][arr[0]]) );
        this.setStrings();
    }

    setStrings() {
        this.objName = this.objName.map( arr =>
            [arr[0]].concat(arr.slice(1).map( val =>
                this.fields.find( field => arr[0] in field )[arr[0]]
                           .find( item => item.id === val ).name
            ))
        );
        console.log(this.objName);
    }
}

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

new App(preview, objName, fields);

.as-console-wrapper { max-height: 100% !important; top: 0; }

请注意，此代码假设所有搜索都会匹配。如果您的情况并非如此，则必须添加一些代码来定义在引用不匹配的情况下应返回哪些值。​​

这是代码的一个变体:

class App {
    constructor(preview, objName, fields) {
        this.preview = preview;
        this.objName = objName;
        this.fields = fields;
        this.setNumbers();
    }

    setNumbers() {
        this.objName = this.objName.map( arr => 
            arr[0] in this.preview[0]
                ? arr.concat(this.preview[0][arr[0]])
                : arr
        );
        this.setStrings();
    }

    setStrings() {
        this.objName = this.objName.map( arr =>
            [arr[0]].concat(arr.slice(1).map( val => {
                let find = this.fields.find( field => arr[0] in field );
                if (find) find = find[arr[0]].find( item => item.id === val );
                return find ? find.name : val;
            }))
        );
        console.log(this.objName);
    }
}

var objName = [['obj1'], ['obj2'], ['obj3']],
    preview = [{
        obj1: [1, 2],
        obj2: [3, 4, 5],
    }],
    fields = [{
        obj1:[{
            id:1,
            name:'string_name1'
        }, {
            id:2, 
            name:'string_name2'
        }]
    }, {
        obj2:[{
            id:3, 
            name:'string_name3'
        }, {
            id:4, 
            name:'string_name4'
        }]
    }];

new App(preview, objName, fields);

.as-console-wrapper { max-height: 100% !important; top: 0; }