Блог

Главная - Вопросы по программированию - Javascript Как получить все значения для свойства из массива объектов?

Javascript Как получить все значения для свойства из массива объектов?

#javascript #arrays #object #filter #properties

#javascript #массивы #объект #Фильтр #свойства

Вопрос:

Привет, коллеги-разработчики 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"},
  ];

и exmaple array для того, как мои данные поступают из api. Как вы можете видеть, два свойства category amp; type , которые я знаю, всегда будут оставаться постоянными, но их значения могут меняться в зависимости от вводимых пользователем данных.

Я хочу установить все доступные значения для этих двух реквизитов объекта для моего фильтра. Как мне получить все значения для определенного prop, чтобы получить массив значений для определенного свойства, который затем я могу присвоить своему выпадающему списку в 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, так что потерпите. Спасибо.

Комментарии:

1. Что вы пробовали до сих пор?

Ответ №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);

Ответ №2:

Есть по крайней мере 2 способа, которыми вы можете это сделать:

  1. Использование Array.includes . Как упоминалось выше @baymax, вы можете фильтровать массив с помощью includes .
  2. Использование Set в Javascript. Ознакомьтесь с кодом.
 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)