使用基于数组值的键连接来自多个对象的值 - Javascript

Question

I need to create a new object with keys and values based on array of keys from another object. I have two Objects with the following structure:

const parentObject = {P1:['C1','C2','C3','C4'], P2:['C5','C6']};

const values = {C1: "value", C2: "value", C3: "value",C4: "value", C5: "value",C6: "value"}

The result I expect is:

    const result = {P1: {C1: "value", C2: "value", C3: "value", C4: "value"}, 
                    P2: {C5: "value",C6: "value"}}

What I tried:

 let result = {}

    Object.entries(parentObject).map(([key, value]) => {
      value.map(i => {
        let keysAndValues = { [key]: { [i]: values[i] } };
        result = Object.assign(keysAndValues)
      })
    })

The result of my code is only the last parent and value, but I need all of them.

The keys and values is a result from a database so it changes all the time.

Answer 1

You can use

 const parentObject = {P1:['C1','C2','C3','C4'], P2:['C5','C6']}; const values = {C1: "value", C2: "value", C3: "value",C4: "value", C5: "value",C6: "value"} const result = Object.fromEntries( Object.entries(parentObject).map(([key, value]) => [ key, value.reduce((p, c) => (p[c] = values[c], p), {}) ]) ); console.log(result);

As a sidenote, in devtool global scope, there is already a values (also in browsers other than chrome, eg FF), which would clash, but there is no problem, if it's inside some other scope, or just not in the console, which is probably the case for you.

Answer 2

You could take a recursive function which works with array, objects an just a promitive for getting the value.

 const fill = pattern => Array.isArray(pattern)? pattern.map(fill): pattern && typeof pattern === 'object'? Object.fromEntries(Object.entries(pattern).map(([k, v]) => [k, fill(v)])): values[pattern], pattern = { P1: ['C1', 'C2', 'C3', 'C4'], P2: ['C5', 'C6'] }, values = { C1: "value", C2: "value", C3: "value", C4: "value", C5: "value", C6: "value" }, result = fill(pattern); console.log(result);

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