【Vue.js】別オブジェクトのデータを使って並び替える方法

Question

実現したいこと

Vue 2.6.10

Vueでアプリを作成しています。
配列データの並び替えについて教えて下さい。

shops_mastersというオブジェクトにこのようなデータが入っています
shops_masters

ID	name	order_number
1	a_shop	1
2	b_shop	2
3	c_shop	3
・
・
・

一方で、
item.shopsというデータには、下記のとおりitemに紐づくshopデータのnameのみが格納されている)

[c_shop,b_shop]

このitem.shopsのデータをshops_mastersのorder_numberの昇順に並び替えを行いたいのですが、その方法が思い浮かびません。
こちらを教えていただければと思います。

Answer 1

並び替えたい条件に基づいてsortに比較関数を定義します。

const sortShopsByMasters = (masters, shopNames) => {
  const getOrderNumber = (masters, shopNames, shopName) => {
    const index = masters.findIndex(shop => shop.name === shopName)
    return index > -1 ? masters[index].order_number : shopNames.length
  }
  // deepcopyのためにlodash(https://lodash.com/)を使っています。
  // 元の配列がそのまま使われて良いならcloneDeepは不要です
  // return item_shops.sort((a, b) => {
  
  return _.cloneDeep(item_shops).sort((a, b) => {
    const aNum = getOrderNumber(shops_masters, item_shops, a)
    const bNum = getOrderNumber(shops_masters, item_shops, b)
    return aNum - bNum
  })
}

const shops_masters = [{
  id: 1,
  name: 'a_shop',
  order_number: '1'
}, {
  id: 2,
  name: 'b_shop',
  order_number: '3'
}, {
  id: 3,
  name: 'c_shop',
  order_number: '4'
}, {
  id: 4,
  name: 'd_shop',
  order_number: '2'
}]

const item_shops = ['c_shop', 'b_shop', 'unknown_shop', 'a_shop', 'd_shop']
console.log('before', item_shops)
// "before", ["c_shop", "b_shop", "unknown_shop", "a_shop", "d_shop"]

const sorted_item_shops = sortShopsByMasters(shops_masters, item_shops)
console.log('sorted', sorted_item_shops)
// "sorted", ["a_shop", "d_shop", "b_shop", "c_shop", "unknown_shop"]

思い浮かばないとのことですが、多少は試行錯誤したコードを掲載していただけると良いかと思います。

Comments

[katahik]

大変助かりました、ありがとうございました。