筛选和克隆对象属性

Question

I have 2 arrays of objects: itemsList and itemsFetched . All of the objects inside each array have the same structure (nr of key/values). One of those keys has the same 'meaning' but a different name ( item_id on itemsList , id on itemsFetched ). Their values are the same.

I need to filter the itemsList array and leave only the objects that have the item_id value equal to the id value on itemsFetched . Then copy(add) the key/value count from each object on the itemsFetched array (which matches the item_id=id) to the filtered array.

I've a working code but I'm sure it isnt the best way to solve this problem. I've already asked something similar before (regarding the 'filter' part) which solved my problem, but since I had to add the 'count' part after the filtering, I ended up refactoring the whole thing.

itemsList (sample)

[
  {
      "id": 0,
      "name": "Egg",
      "img": "http://www.serebii.net/pokemongo/items/egg.png"
  },
  {
      "id": 1,
      "name": "Pokeball",
      "img": "http://www.serebii.net/pokemongo/items/20pokeballs.png"
  },
  {
      "id": 2,
      "name": "Greatball",
      "img": "http://www.serebii.net/pokemongo/items/greatball.png"
  },
  { 
      "id": 401,
      "name": "Incense",
      "img": "http://www.serebii.net/pokemongo/items/incense.png" 
  },
  { 
      "id": 901,
      "name": "Incubator (Unlimited)",
      "img": "http://www.serebii.net/pokemongo/items/eggincubator.png"
  }
]

itemsFetched (sample)

[ 
  {
    "item_id": 1, 
    "count": 50,
    "unseen": true
  },
  {
    "item_id": 401,
    "count": 2, 
    "unseen": true
  },
  { 
    "item_id": 901, 
    "count": 1, 
    "unseen": true 
  }
]

resultArray (what I want in the end)

[
  { 
    "id": 1,
    "name": "Pokeball",
    "count": 50,
    "img": "http://www.serebii.net/pokemongo/items/20pokeballs.png",
  },
  { 
    "id": 401,
    "name": "Incense",
    "count": 2,
    "img": "http://www.serebii.net/pokemongo/items/incense.png"
  },
  { 
    "id": 901,
    "name": "Incubator (Unlimited)",
    "count": 1,
    "img": "http://www.serebii.net/pokemongo/items/eggincubator.png"
  }
]

my current code (working)

let arr = [];
itemsFetched.forEach((item) => {
  itemsList.forEach((item2) => {
    if (item.item_id === item2.id) {
      arr.push({
        "id": item.item_id,
        "name": item2.name,
        "count": item.count,
        "img": item2.img
      });
    }
  });
});

PS: I'm able to use ES6/7 syntax/features.

Answer 1

You can use hash map to reduce Time complexitly, your algorithm is O(m*n) , The follow is O(m+n+r)

const itemsMap = itemsList.reduce((map, item) => {
    map[item.id] = item
    return map
}, {})
const results = itemsFetched
    .filter((item) => itemsMap.hasOwnProperty(item.item_id))
    .map((item) => ({
        id: item.item_id,
        name: itemsMap[item.item_id].name,
        count: item.count,
        img: itemsMap[item.item_id].img,
    }))

Answer 2

Use a for ... of loop (an ES6 feature) in conjunction with Array#map .

This makes it much easier to return the merged object the first time you find a match, which is a logically optimization because neither list should contain more than one entry with a given id .

const result = itemsFetched.map(data => {
  for (let item of itemsList) {
    if (data.item_id === item.id) {
      return {
        id: item.id,
        name: item.name,
        count: data.count,
        img: item.img
      }
    }
  }
})

Snippet:

 const itemsList = [{ "id": 0, "name": "Egg", "img": "http://www.serebii.net/pokemongo/items/egg.png" }, { "id": 1, "name": "Pokeball", "img": "http://www.serebii.net/pokemongo/items/20pokeballs.png" }, { "id": 2, "name": "Greatball", "img": "http://www.serebii.net/pokemongo/items/greatball.png" }, { "id": 401, "name": "Incense", "img": "http://www.serebii.net/pokemongo/items/incense.png" }, { "id": 901, "name": "Incubator (Unlimited)", "img": "http://www.serebii.net/pokemongo/items/eggincubator.png" }] const itemsFetched = [{ "item_id": 1, "count": 50, "unseen": true }, { "item_id": 401, "count": 2, "unseen": true }, { "item_id": 901, "count": 1, "unseen": true }] const result = itemsFetched.map(data => { for (let item of itemsList) { if (data.item_id === item.id) { return { id: item.id, name: item.name, count: data.count, img: item.img } } } }) console.log(result) 

Answer 3

One way to improve is to use for..of statement instead of forEach for the inner loop. This helps break from the loop once the id matches. There is no direct way to break from forEach method.

let arr = [];
itemsFetched.forEach((item) => {
  for (let item2 of itemsList) {
    if (itemsFetched.item_id === itemsList.id) {
      arr.push({
        "id": itemsFetched.item_id,
        "name": itemsList.name,
        "count": itemsFetched.count,
        "img": itemsList.img
      });
      break;
    }
  }
});

Answer 4

Like this?

 var itemsList = [ { "id": 0, "name": "Egg", "img": "http://www.serebii.net/pokemongo/items/egg.png" }, { "id": 1, "name": "Pokeball", "img": "http://www.serebii.net/pokemongo/items/20pokeballs.png" }, { "id": 2, "name": "Greatball", "img": "http://www.serebii.net/pokemongo/items/greatball.png" }, { "id": 401, "name": "Incense", "img": "http://www.serebii.net/pokemongo/items/incense.png" }, { "id": 901, "name": "Incubator (Unlimited)", "img": "http://www.serebii.net/pokemongo/items/eggincubator.png" } ]; var itemsFetched = [ { "item_id": 1, "count": 50, "unseen": true }, { "item_id": 401, "count": 2, "unseen": true }, { "item_id": 901, "count": 1, "unseen": true } ] let arr = []; itemsFetched.forEach((item) => { itemsList.forEach((item2) => { if (item.item_id == item2.id) { arr.push({ "id": item.item_id, "name": item2.name, "count": item.count, "img": item2.img }); } }); }); console.log(arr);