循环遍历 2 个数组和对象数组，并将数组 1 和数组 2 的元素插入到对象的某些键的数组中

Question

I have an array of objects and an array. My intention is to loop through both and inserting each element of the array into a certain key into the array of objects.

My intention to dynamically insert the values of each array

Notes for Clarification:

1. arr1 length = 44
2. arr2 length = 44
3. arrOfObj length = 44

4. my thought process of the operation:

   1. loop through arr1 either by forEach or for
   2. loop through arr2
   3. loop through arrOfObject
   4. insert into arrOfObject[i].labels arr1[i]
   5. insert into arrOfObject[i].values arr2[i]

an example:

• Array 1

    const arr = [ 76, 72, 69, 66, 66, 66, 65, 65, 64, 64, 64, 63, 61, 61, 61, 61, 61, 61, 60, 59, 59, 59, 58, 58, 57, 57, 56, 56, 56, 55, 54, 54, 53, 52, 52, 51, 51, 50, 50, 49, 49, 49, 47, 47]

• Array 2

    const arr2 = [ "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9", "Item10", "Item11", "Item12", "Item13", "Item14", "Item15", "Item16", "Item17","Item18", "Item19", "Item20", "Item21", "Item22", "Item23", "Item24", "Item25","Item26", "Item27", "Item28", "Item29", "Item30", "Item31", "Item32", "Item33", "Item34", "Item35", "Item36", "Item37", "Item38", "Item39", "Item40", "Item41", "Item42", "Item43", "Item44]

• Array of object

    const arrOfObj = [
    {
      labels:[],
      values: [],
    },
    {
      labels:[],
      values: [],
     },
    {
      labels:[],
      values: [],
     },
    ]

The desired output is

    const arrOfObj = [
    {
      labels:[arr1[0]],
      values: [arr2[0]],
    },
    {
      labels:[arr1[1]],
      values: [arr2[1]],
     },
    ]

-outcome

    const arrOfObj = [
    {
      labels:['item1'],
      values: [76],
    },
    {
      labels:['item2'],
      values: [72],
     },
    ]

If there is a way to do it without nested loops (maybe one loop for values insertion and a separate one for labels), as nested loops decrease the execution performance, then it is preferable unless it is a necessity then it is okay.

As well if you a good source for objects and arrays manipulation above the basics level it will great to share

so far my work can be viewed on https://codesandbox.io/s/epic-archimedes-8kg6h?eslint=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark

thanks a lot in advance

Answer 1

Reworked the original answer to this function. It will dynamically do what you intended for x array with x length

function combineArr(target, ...arrays){
    // looping through the target array
    target.map((ele, superIndex)=>{
        // looping through the attributes of the target
        Object.keys(ele).map((key, index)=>{
            // writing the results
            target[superIndex][key] = arrays[index][superIndex]
        })
    })
    return target;
}

console.log(combineArr(arrayOfObj,arr1,arr2))

target is your arrOfObj, and arrays will be arr1, arr2

So what it boils down to is that your arrOfObj shares an index with arr1 and arr2. arrOfObj[i] arr1[i] arr2[i] but since arrOfObj[i] is an object with keys we make it iterable with Object.keys and make the arrays iterable aswell with ...arrays so that keys[i] shares index with arrays[i]

Edit: I was able to reproduce the error that was present in your link. The generation of arrOfObj with the template was broken(don't know why) to fix this and a little bit improved version of the combiner see below

// use const when possible
const arr1 = [];
const arr2 = [];


// was fine as is 
// Getting the Keys and values of input in 2 separate arrays
inputs.forEach(x => {
    for (const key in x) {
        arr1.push(key);
        arr2.push(x[key]);
    }
});

//template made some problems... don't know why
// using arrOfObj to have template dubplicated the same number of arr1 and arr2
const arrOfObj = inputs.map(() => {
    return {
        labels: [],
        values: []
    }
})

// function declaration for combiner
function combineArr(target, ...arrays) {
    target.map((ele, superIndex) => {
        Object.keys(ele).map((key, index) => {
            target[superIndex][key].push(arrays[index][superIndex])
        })
    })
    return target;
}

// calling for new array
console.log(combineArr(arrOfObj, arr1, arr2))