二次元配列をグループ分けしてキー名をつけてオブジェクトに変換する方法

Question

二次元配列をグループ分けしてキー名をつけてオブジェクトに変換する方法について質問します。
変数を下記のstartからgoalに変換したいと考えております。

        const start = [
            ["株式会社トヨタ", "システム利用料の件", "システム利用料", 1, "個", 1000000],
            ["株式会社トヨタ", "システム利用料の件", "その他費用1", 1, "個", 10000],
            ["株式会社HONDA", "システム利用料の件その２", "システム利用料", 1, "個", 5500000],
            ["株式会社HONDA", "システム利用料の件その２", "その他費用2", 1, "個", 10000],
        ];

        const goal = {
            "株式会社トヨタ": {
                expenseTitle: "システム利用料の件",
                arrays: [
                    ["システム利用料", "", 1, "個", 1000000],
                    ["その他費用1", "", 1, "個", 1000]
                ]
            },
            "株式会社HONDA": {
                expenseTitle: "システム利用料の件その２",
                arrays: [
                    ["システム利用料", "", 1, "個", 5500000],
                    ["その他費用2", "", 1, "個", 1000]
                ]
            }
        }

一度オブジェクトの連想配列に変換してから、Map()メソッドを使う方法でいけそうな気がしているのですが、
そもそもそのアプローチで良いのか、もっと良い方法があればご教授頂けると助かります。

Comments

[think49]

考えるだけでコードを書かないのは、丸投げも同然です。
https://teratail.com/help/question-tips#questionTips1-2

> 一度オブジェクトの連想配列に変換してから、Map()メソッドを使う方法でいけそうな気がしているのですが

仮説を立てたなら、試してみればいいのでは？
試さないと分からないし、覚えられません。
私は間違っていると思いますが、失敗しないと分からないこともあります。

Answer 1

こんにちは
ご質問に、

もっと良い方法があればご教授頂けると助かります。

とありましたので、配列やオブジェクトの操作で便利なライブラリlodash を使う方法を挙げます。使うメソッドは以下の２点です。

• _.groupBy
• _.mapValues

上記を使って、以下のように書けます。

const goal = _(start)
               .groupBy(0)
               .mapValues(arrays => (
                 {
                   expenseTitle: arrays[0][1],
                   arrays: arrays.map(array => [array[2], '', ...array.slice(3)])
                 }))
               .value();
 

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/jOWYGzq

追記1

ただし、上記のコードでは、ある社名を持つarray のうち、startの先頭に近いものに含まれる第2番目の要素が、expenseTitle として使われます。ですので、もし例えば start が以下

const start = [
  ["株式会社トヨタ", "システム開発費の件", "その他費用1", 1, "個", 1000000],
  ["株式会社トヨタ", "システム利用料の件", "システム利用料", 1, "個", 1000000],
  ["株式会社トヨタ", "システム利用料の件", "その他費用2", 1, "個", 10000]
];

のように、先頭要素の企業名は同じで２番目の要素が異なるarrayを含む場合であっても、expenseTitle としては、先頭に近い ["株式会社トヨタ", "システム開発費の件", "その他費用1", 1, "個", 1000000] の "システム開発費の件" が使われて、goalは以下になります。

{
  株式会社トヨタ: {
    expenseTitle: "システム開発費の件",
    arrays: [
      ["その他費用1", "", 1, "個", 1000000],
      ["システム利用料", "", 1, "個", 1000000],
      ["その他費用2", "", 1, "個", 10000]
    ]
  }
}

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/wvMprXB

もし、上記だと、ご要望と違ってしまう場合は、ご質問に追記いただくかコメント頂ければと思います。

追記2

lodash を使わずに、reduce を使ってもできます。

const goal = start.reduce((obj, array) => {
  const [company, expenseTitle, expenseDetail, ...rest] = array;  
  if (!obj[company]) {
    obj[company] = { expenseTitle, arrays: [] };
  }
  obj[company].arrays.push([expenseDetail, '', ...rest]);
  return obj;
}, {});

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/rNxpGZG

ただし、上記のコードも、追記1に書いたように、同じ企業名の明細データの中では、startの先頭に近いものに含まれる 第2要素が goal で expenseTitleとして使われます。

追記3

ご質問に書かれている要件の範囲を超えるものになりますが、先の追記1に対応する例を挙げておきます。ある一つの企業の明細データの中に、複数のexpenseTitleに相当する文字列が含まれる場合に対応するために、lodashのgroupByとmapValues を入れ子にして使います。

const goal = _(start)
               .groupBy(0)
               .mapValues(arrays => 
                 _(arrays)
                   .groupBy(1)
                   .mapValues(subArrays => subArrays.map(array => array.slice(2)))
                   .value()
               )
               .value();

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/dyGJdJq

Answer 2

一度オブジェクトの連想配列に変換してから、Map()メソッドを使う方法

(中略) そもそもそのアプローチで良いのか

Map を使おうとお考えなら、オブジェクトの連想配列 を後で使う必要があるかを考え、
必要なさそうなら、ダイレクトにMapを作っても良いかもしれません。

var goal = start.reduce( (map, [key, expenseTitle, ...others]) => (
  map.has(key)
    ? map.get(key).arrays.push(others)
    : map.set(key, {expenseTitle,arrays:[others]})
, map), new Map);

Comments

[YufanLou]

美しいコードをお見せいただきありがとうございます！
コンマ演算子知りませんでした。勉強になりました！

Answer 3

"Map()メソッドを使う方法"が見ないとこちらの方法は”もっと良い方法”かどうか知りませんよ〜

そもそもこんなデータ変換問題は領域によって一つ一つ違っていますし、通用な方法がありません。ただ、こちらはデータベースの関係型データをオブジェクトデータに変換してそうですが、オブジェクト関係マッピング（ORM）というの検索してみてください。けど、こちらの二重配列は関係型データとして正規化されていないので、ORMも対応してないと思います。

Answer 4

JavaScript: [????, ????, ????, ????, ????, ????]のような配列を[[????, ????, ???? ], [????, ????, ????]]に仕分けする - Qiita
https://qiita.com/suin/items/25908e15aeaa7e3a1ae6#comment-39fdeb534519eebe5d10

上記のコメント欄で汎用的なgroup関数を書いたのでそちらを使って別回答しておきます。
出力結果は同じものです。

https://jsbin.com/togedojivo/5/edit?html,js,console

const start = [
  ["株式会社トヨタ", "システム利用料の件", "システム利用料", 1, "個", 1000000],
  ["株式会社トヨタ", "システム利用料の件", "その他費用1", 1, "個", 10000],
  ["株式会社HONDA", "システム利用料の件その２", "システム利用料", 1, "個", 5500000],
  ["株式会社HONDA", "システム利用料の件その２", "その他費用2", 1, "個", 10000],
];

const group = (valueArray, groupFunc) => {
  const result = {
    index: [],
    result: [],
  };
  valueArray.forEach(v => {
    const funcResult = groupFunc(v);
    let index = result.index.indexOf(funcResult);
    if (index === -1) {
      result.index.push(funcResult);
      index = result.index.length - 1;
      result.result.push([]);
    }
    result.result[index].push(v);
  })

  return result
}

const result = group(start, v => v[0]);
const goal = {};
result.index.forEach((v, i) => goal[v] = {
  expenseTitle: result.result[i][0][1],
  arrays: result.result[i].map(e => [e[2], e[3], e[4], e[5]])
});


console.log(goal);

Answer 5

いわゆるデータの正規化ができていません

• 株式会社トヨタに対するexpenseTitleが"システム利用料の件"
• 株式会社HONDA　同上 "システム利用料の件その２"

が１対１である保証が必要です

Comments

[yambejp]

こんな感じ？
const goal=start.reduce((x,y)=>{
x[y[0]]=x[y[0]]||{};
x[y[0]].expenseTitle=y[1];
x[y[0]].arrays=x[y[0]].arrays||[];
x[y[0]].arrays.push([y[2],y[3],y[4],y[5]]);
return x;
},{});
console.log(goal);

Answer 6

一度オブジェクトの連想配列に変換してから、Map()メソッドを使う方法でいけそうな気がしているのですが

そちらでもよいと思います。

自分の方も書いてみました。

会社名と次の「システム利用料の件」の所が一致していないといけませんが、次のコードでデータ加工できました。

動作確認、こちらでできます。
https://jsbin.com/xodiyoziwu/5/edit?html,js,console

const start = [
  ["株式会社トヨタ", "システム利用料の件", "システム利用料", 1, "個", 1000000],
  ["株式会社トヨタ", "システム利用料の件", "その他費用1", 1, "個", 10000],
  ["株式会社HONDA", "システム利用料の件その２", "システム利用料", 1, "個", 5500000],
  ["株式会社HONDA", "システム利用料の件その２", "その他費用2", 1, "個", 10000],
];

const goal = {};
start.forEach(data => {
  if (goal[data[0]] === undefined) {
    goal[data[0]] = {
      expenseTitle: data[1],
      arrays: []
    }
  }
  goal[data[0]].arrays.push([data[2], data[3], data[4]]);
})

console.log(goal);