I have 2 arrays.

The 1st array has 4 category objects and each object has "name" and "ref"(reference):

let categories = [
  {
    "name": "Books", 
    "ref": "categories/category1"
  },
  {
    "name": "Computers", 
    "ref": "categories/category2"
  },
  {
    "name": "Drink", 
    "ref": "categories/category3"
  },
  {
    "name": "Food", 
    "ref": "categories/category4"
  }
];

The 2nd array has the references to categories:

let refs = ["categories/category2", "categories/category4"];

Now, I want to make the new array of category names by extracting only category names from the 1st array "categories" variable using the references in the 2nd array "refs" variable.

I created the code to make the new array of category names using 2 arrays and it works perfectly making the new array which has 2 category names "Computer" and "Food":

let newArr = [];

for(let i = 0; i < refs.length; i  ) {
  for(let j = 0; j < categories.length; j  ) {
    if(refs[i] == categories[j].ref) {
      newArr.push(categories[j].name);
    }  
  }
}

console.log(newArr); // ["Computer", "Food"]

This is the full runnable code:

let categories = [
  {
    "name": "Book", 
    "ref": "categories/category1"
  },
  {
    "name": "Computer", 
    "ref": "categories/category2"
  },
  {
    "name": "Shoes", 
    "ref": "categories/category3"
  },
  {
    "name": "Food", 
    "ref": "categories/category4"
  }
];

let refs = ["categories/category2", "categories/category4"];

let newArr = [];

for(let i = 0; i < refs.length; i  ) {
  for(let j = 0; j < categories.length; j  ) {
    if(refs[i] == categories[j].ref) {
      newArr.push(categories[j].name);
    }  
  }
}

console.log(newArr); // ["Computer", "Food"]

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

However, I want to make this code simpler. Are there any ways to make this code simpler?

let newArr = [];

for(let i = 0; i < refs.length; i  ) {
  for(let j = 0; j < categories.length; j  ) {
    if(refs[i] == categories[j].ref) {
      newArr.push(categories[j].name);
    }  
  }
}

console.log(newArr); // ["Computer", "Food"]

CodePudding user response：

• Using Array#reduce, iterate over categories while updating a Map where the key is the ref and the value is the name.
• Using Array#map, iterate over refs and use the above Map to get the corresponding names.

const
  categories = [ { "name": "Books", "ref": "categories/category1" }, { "name": "Computers",  "ref": "categories/category2" }, { "name": "Drink", "ref": "categories/category3" }, { "name": "Food",  "ref": "categories/category4" } ],
  refs = ["categories/category2", "categories/category4"];
  
const categoryRefNameMap = categories.reduce((map, { name, ref }) =>
  map.set(ref, name)
, new Map);

const newArr = refs.map(ref => categoryRefNameMap.get(ref));

console.log(newArr);

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use filter to get only the categories whose ref is inside refs.

if you only want the name you can use map.

let filtered = categories.filter((c) => refs.includes(c.ref));
console.log(filtered);
-> [{name: 'Computer', ref: 'categories/category2'}, 
   {name: 'Food', ref: 'categories/category4'}]

let onlyNames = filtered.map((c) => c.name);
console.log(onlyNames);
-> ['Computer', 'Food'];