Assign object value to array with different values in array of objects

I am trying to assign an array to an object value to array of objects and the array will different based on condition. Every time the last value of the array is assigned to the array of object is assigned.

  x.map(item => {
    var val = item.name;
    dropDownData.map(newItem => {
        newItem.isSelected = false;
        if(newItem.value === val) {
            newItem.isSelected = true;
        }
    })
    item.arr = dropDownData;
})
var x = [
  {
    "name": "test"
  },
  {
    "name": "test1"
  },
  {
    "name": "test2"
  },
  {
    "name": "test3"
  }
]
var dropDownData = [{
    name: 'One',
    value: 'test'
},{
    name: 'two',
    value: 'test1'
},{
    name: 'three',
    value: 'test2'
},{
    name: 'four',
    value: 'test3'
}]

Output:

   [
  {
    "name": "test",
    "arr": [
      {
        "name": "One",
        "value": "test",
        "isSelected": false
      },
      {
        "name": "two",
        "value": "test1",
        "isSelected": false
      },
      {
        "name": "three",
        "value": "test2",
        "isSelected": false
      },
      {
        "name": "four",
        "value": "test3",
        "isSelected": true
      }
    ]
  },
  {
    "name": "test1",
    "arr": [
      {
        "name": "One",
        "value": "test",
        "isSelected": false
      },
      {
        "name": "two",
        "value": "test1",
        "isSelected": false
      },
      {
        "name": "three",
        "value": "test2",
        "isSelected": false
      },
      {
        "name": "four",
        "value": "test3",
        "isSelected": true
      }
    ]
  },
  {
    "name": "test2",
    "arr": [
      {
        "name": "One",
        "value": "test",
        "isSelected": false
      },
      {
        "name": "two",
        "value": "test1",
        "isSelected": false
      },
      {
        "name": "three",
        "value": "test2",
        "isSelected": false
      },
      {
        "name": "four",
        "value": "test3",
        "isSelected": true
      }
    ]
  },
  {
    "name": "test3",
    "arr": [
      {
        "name": "One",
        "value": "test",
        "isSelected": false
      },
      {
        "name": "two",
        "value": "test1",
        "isSelected": false
      },
      {
        "name": "three",
        "value": "test2",
        "isSelected": false
      },
      {
        "name": "four",
        "value": "test3",
        "isSelected": true
      }
    ]
  }
]

Expected Output:

   [
  {
    "name": "test",
    "arr": [
      {
        "name": "One",
        "value": "test",
        "isSelected": true
      },
      {
        "name": "two",
        "value": "test1",
        "isSelected": false
      },
      {
        "name": "three",
        "value": "test2",
        "isSelected": false
      },
      {
        "name": "four",
        "value": "test3",
        "isSelected": false
      }
    ]
  },
  {
    "name": "test1",
    "arr": [
      {
        "name": "One",
        "value": "test",
        "isSelected": false
      },
      {
        "name": "two",
        "value": "test1",
        "isSelected": true
      },
      {
        "name": "three",
        "value": "test2",
        "isSelected": false
      },
      {
        "name": "four",
        "value": "test3",
        "isSelected": false
      }
    ]
  },
  {
    "name": "test2",
    "arr": [
      {
        "name": "One",
        "value": "test",
        "isSelected": false
      },
      {
        "name": "two",
        "value": "test1",
        "isSelected": false
      },
      {
        "name": "three",
        "value": "test2",
        "isSelected": true
      },
      {
        "name": "four",
        "value": "test3",
        "isSelected": false
      }
    ]
  },
  {
    "name": "test3",
    "arr": [
      {
        "name": "One",
        "value": "test",
        "isSelected": false
      },
      {
        "name": "two",
        "value": "test1",
        "isSelected": false
      },
      {
        "name": "three",
        "value": "test2",
        "isSelected": false
      },
      {
        "name": "four",
        "value": "test3",
        "isSelected": true
      }
    ]
  }
]

So each array of object should have a separate array which has array object with the isSelected true for name in the parent array of object.

21 thoughts on “Assign object value to array with different values in array of objects”

  1. You need to take a copy of the object because of the same object reference.

    This solution features spreading of objects and mapping of the items.

    const
        x = [{ name: "test" }, { name: "test1" }, { name: "test2" }, { name: "test3" }],
        dropDownData = [{ name: 'One', value: 'test' }, { name: 'two', value: 'test1' }, { name: 'three', value: 'test2' }, { name: 'four', value: 'test3' }],
        result = x.map(item => ({
            ...item,
            arr: dropDownData.map(dropdown => ({
                ...dropdown,
                isSelected: dropdown.value === item.name
            }))
        }));
    
    console.log(result);
    .as-console-wrapper { max-height: 100% !important; top: 0; }
    Reply
  2. When you run .map on an array it returns a new array.
    In you case it looks like you a using it more like a forEach loop.

    const x = [{
      "name": "test"
    }, {
      "name": "test1"
    }, {
      "name": "test2"
    }, {
      "name": "test3"
    }]
    
    const dropDownData = [{
      name: 'One',
      value: 'test'
    }, {
      name: 'two',
      value: 'test1'
    }, {
      name: 'three',
      value: 'test2'
    }, {
      name: 'four',
      value: 'test3'
    }]
    
    const result = x.map(item => {
      const combined = {
        name: item.name,
        arr: dropDownData.map(val => ({
          ...val,
          isSelected: val.value === item.name
        }))
      }
      return combined
    })
    
    console.log(result)
    Reply

Leave a Comment