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

Question

Hello fellow Javascript developers, I hope you're all having a good day.

I'm trying to get all dynamically set values for certain properties of object elements from an array for my filter. For eg

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"},
  ];

and exmaple array for how my data comes from the api. As you can see the two properties category & type that I know will always remain constant but their values may change based on user input data.

I want to set all available values for these two object props for my filter. How do I get all the values for a certain prop to get myself an array of values for a certain property which then I can assign to my Dropdown in React Native.

Result:

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

and

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

and then these two arrays are basically passed to the filter which will then be used to sort the data. I assume it's not too complex, but I'm a total beginner in javascript so bear with me. Thank You.

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

There are atleast 2 ways you can do this:

1. Using Array.includes . As @baymax mentioned above, you can filter through the array using includes .
2. Using Set in Javascript. Check out the code.

 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)