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

Question

I have two arrays, with nested objects, downloaded as part of calls to API endpoints, one (preview) has just numbers.

Example:

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

I had to make a second call to another endpoint, to get a list of IDs with strings

Example:

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

I need to match the IDs to the first array of objects numbers, so I have strings/text values to display on my web page

I have 2 functions

The first one, pulls the numbers from the preview array and pushes them to my own editable array that I will use to display on the page

This is the array before function runs

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

This is the first function, matches the names in preview to the names in my array and pushes values

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

The second matches the IDs in fields to the numbers in objName and replaces with the string value

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

The objName array, for output, ends up looking like:

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

It works, but makes my eyes hurt, there must be an easier cleaner way of doing this?

Plunker link: https://plnkr.co/edit/KBDu3ZehHl04er6eut6r?p=preview

Answer 1

Your data structures are not ideal for this kind of transformation. For instance, it would have been better if the display strings could be addressed directly given an "obj"-property and array index, without having to iterate through arrays.

Anyway, using the existing structure, you can still improve by using array functions, such as find and 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; } 

Note that this code assumes all searches lead to matches. If this is not your case, you'll have to add some code to define which values should be returned in case of non-matching references.

Here is such a variant of the code:

 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; } 

Answer 2

It's easier and cleaner to do this if you break it down into smaller pieces:

 let objsToMap = [{ obj1: [1, 2, 7], obj2: [3, 4], obj3: [1, 2] }] let objValues = [{ obj1: [{ id: 1, name: 'string_name1' }, { id: 2, name: 'string_name2' }] }, { obj2: [{ id: 3, name: 'string_name3' }, { id: 4, name: 'string_name4' }] }]; function findValueForId(objDef, id) { let idKeyMap = objDef.find(item => item.id === id); return idKeyMap ? idKeyMap.name : null; } function findObjectValues(valueMapping, key) { let objectWithObjectValues = valueMapping.find(item => key in item); return objectWithObjectValues ? objectWithObjectValues[key] : null; } // returns an array containing key followed by the values corresponding to the specified ids function lookupObject(key, ids, valueMapping) { let objDef = findObjectValues(valueMapping, key) || []; let valuesForIds = ids.map(id => findValueForId(objDef, id)); let valuesWithoutBlanks = valuesForIds.filter(value => value); return [key].concat(valuesWithoutBlanks); } let result = Object.entries(objsToMap[0]).map(([k, v]) => lookupObject(k, v, objValues)); console.log(result); 

You'll notice that this approach uses .find() in two places because your second data structure nests everything into arrays instead of having direct property references. This isn't very good because it's not good for performance and makes the code more convoluted than it has to be.

Another option is to rearrange the second array before consuming it, so that it's like this:

let objValues = {
  obj1: { 
    '1': 'string_name1',
    '2': 'string_name2'
  },
  obj2: {
    '3': 'string_name3', 
    '4': 'string_name4'
  }
};

Here's how you could do that:

 let objsToMap = [{ obj1: [1, 2, 7], obj2: [3, 4], obj3: [1, 2] }] let objValuesRaw = [{ obj1: [{ id: 1, name: 'string_name1' }, { id: 2, name: 'string_name2' }] }, { obj2: [{ id: 3, name: 'string_name3' }, { id: 4, name: 'string_name4' }] }]; function cleanupObjDef(objDef) { return objDef.reduce(function(acc, el) { acc[el.id] = el.name; return acc; }, {}); } function cleanupObjValues(objValues) { let allCombined = Object.assign({}, ...objValues); return Object.entries(allCombined).reduce(function (acc, [k, v]) { acc[k] = cleanupObjDef(v); return acc; }, {}); } // returns an array containing key followed by the values corresponding to the specified ids function lookupObject(key, ids, valueMapping) { let objDef = valueMapping[key] || {}; let valuesForIds = ids.map(id => objDef[id]); let valuesWithoutBlanks = valuesForIds.filter(value => value); return [key].concat(valuesWithoutBlanks); } let objValues = cleanupObjValues(objValuesRaw); let result = Object.keys(objsToMap[0]).map(key => lookupObject(key, objsToMap[0][key], objValues)); console.log(result);