Javascript 如何从对象数组中获取属性的所有值？

Question

大家好 Javascript 开发人员，希望你们今天过得愉快。

我正在尝试从一个数组中为我的过滤器获取对象元素的某些属性的所有动态设置值。例如

var data = [
    {id: 0, category: "RINGS", type: "CH"},
    {id: 1, category: "NECKLACE", type: "CHE"},
    {id: 2, category: "PENDANT", type: "CH"},
    {id: 3, category: "BRACELET", type: "CH"},
    {id: 4, category: "RINGS", type: "HBR"},
    {id: 5, category: "PENDANT", type: "CHE"},
  ];

以及我的数据如何来自 api 的示例数组。如您所见，我知道 category 和 type 这两个属性将始终保持不变，但它们的值可能会根据用户输入数据而变化。

我想为我的过滤器设置这两个对象道具的所有可用值。我如何获取某个道具的所有值，以便为自己获取某个属性的值数组，然后我可以将其分配给 React Native 中的下拉列表。

结果：

var category = [
    { name: "Rings", id: "RINGS"},
    { name: "Necklace", id: "NECKLACE"},
    { name: "Pendant", id: "PENDANT"},
    { name: "Bracelet", id: "BRACELET"},
  ]

和

var type = [
    { name: "CH", id: "CH" },
    { name: "CHE", id: "CHE" },
    { name: "HBR", id: "HBR" },
  ]

然后这两个数组基本上传递给过滤器，然后过滤器将用于对数据进行排序。我认为它并不太复杂，但我是 javascript 的初学者，所以请多多包涵。谢谢。

Answer 1

var data = [
  { id: 0, category: 'RINGS', type: 'CH' },
  { id: 1, category: 'NECKLACE', type: 'CHE' },
  { id: 2, category: 'PENDANT', type: 'CH' },
  { id: 3, category: 'BRACELET', type: 'CH' },
  { id: 4, category: 'RINGS', type: 'HBR' },
  { id: 5, category: 'PENDANT', type: 'CHE' }
];

const categories = [], types = [];
data.forEach((item) => {
  if (!categories.includes(item.category)) {
    categories.push(item.category);
  }
  if (!types.includes(item.type)) {
    types.push(item.type);
  }
});

const category = categories.map((item) => ({
  name: item.toLowerCase(),
  id: item
}));
const type = types.map((item) => ({ name: item, id: item }));

console.log(category);
console.log(type);

Answer 2

至少有两种方法可以做到这一点：

使用Array.includes。正如上面提到的@baymax，您可以使用 includes.
在 Javascript 中使用 Set。查看代码。

const data = [
    {id: 0, category: "RINGS", type: "CH"},
    {id: 1, category: "NECKLACE", type: "CHE"},
    {id: 2, category: "PENDANT", type: "CH"},
    {id: 3, category: "BRACELET", type: "CH"},
    {id: 4, category: "RINGS", type: "HBR"},
    {id: 5, category: "PENDANT", type: "CHE"},
  ];

// by includes
const uniqueCategories = [];
const uniqueTypes = []
data.forEach(entry => {
  if (!uniqueCategories.includes(entry.category)){
     uniqueCategories.push(entry.category)
  }
  if (!uniqueTypes.includes(entry.type)){
     uniqueTypes.push(entry.type)
  }
})

const categoriesMap = uniqueCategories.map(category => ({name: category.toLowerCase(), id: category}));
const typesMap = uniqueTypes.map(typeEntry => ({name: typeEntry, id: typeEntry}));

// by set
const categoriesSet = new Set()
const typesSet = new Set()

data.forEach(entry => {
  categoriesSet.add(entry.category);
  typesSet.add(entry.type);
});

const uniqueCategoriesFromSet = Array.from(categoriesSet).map(category => ({name: category.toLowerCase(), id: category}));
const uniqueTypesFromSet = Array.from(typesSet).map(typeEntry => ({name: typeEntry, id: typeEntry}));

console.log(uniqueCategoriesFromSet, uniqueTypesFromSet);

console.log(categoriesMap, typesMap)

Javascript 如何从对象数组中获取属性的所有值？

Javascript How to get all values for a property from an Array of Objects?

javascript

arrays

properties

object

filter

Javascript 如何从对象数组中获取 属性 的所有值？

Javascript How to get all values for a property from an Array of Objects?

javascript

arrays

properties

object

filter

Javascript 如何从对象数组中获取属性的所有值？