将对象值分配给对象数组中具有不同值的数组

时间:2021-02-16 15:34:04

标签: javascript arrays

我正在尝试将一个数组分配给一个对象值到对象数组,并且该数组将根据条件而有所不同。每次数组的最后一个值被赋值给对象的数组。

  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'
}]

输出:

   [
  {
    "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
      }
    ]
  }
]

预期输出:

   [
  {
    "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
      }
    ]
  }
]

所以每个对象数组都应该有一个单独的数组,该数组具有数组对象,对象的父数组中的名称为 isSelected 。

2 个答案:

答案 0 :(得分:0)

由于对象引用相同,您需要获取对象的副本。

该解决方案的特点是对象的传播和项目的映射。

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

答案 1 :(得分:0)

当您在数组上运行 .map 时,它会返回一个新数组。 在你的情况下,它看起来更像是一个 forEach 循环。

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)