JavaScriptで多次元配列をfor文でデータ整形したい

Question

前提・実現したいこと

現在、プログラミングをはじめたばかりでJavaScriptのフレームワークのVue.jsを利用しています。
Vue.jsの質問ではないのですが多次元配列？の場合、データの更新の仕方のif文分岐に迷っています。

やりたいことは記事投稿todoアプリ作ってみてるんですが
担当者ごとに記事内容と、タイトルをまとめて表示させたいです。

Vue.jsで他にもいろいろなやり方があるとは思いますが、そもそもデータの整形で以下のようなレスポンスがある場合に
再度データを加工する時のfor文の動きを勉強したくて、元データを修正する以外でデータの形の再整形を検討しています。

APIのレスポンス

[
                    {id:123, title:"title1", content:"content1", user: { account_name:"Tom", email:"[e-mail]"}},
                    {id:124, title:"title2", content:"content2", user: { account_name:"Tom", email:"[e-mail]"}},
                    {id:125, title:"title3", content:"content3", user: { account_name:"Tom", email:"[e-mail]"}},    
                    {id:126, title:"title1", content:"content1", user: { account_name:"Sam", email:"[e-mail]"}},    
]

期待出力結果
※とりあえずaccount_nameの重複を削除して、titleとcontentだけまとめて取得したい

[
      { 
           account_name: "Tom", 
           article: [
                        { title:"title1", content:"content1"},
                        { title:"title2", content:"content2"},
                        { title:"title3", content:"content3"},
                     ]
       },
      { 
           account_name: "Sam", 
           article: [
                        { title:"title1", content:"content1"},
                     ]
       },
]

いろいろやってみたのですが
①for文で名前の重複削除しても、userのaccount_nameを外にだす、ネストの構造の入れ替えを回すやり方がわからない
②①ができても、titleとcontentをTomとSamに紐づかせる方法がわからない

解答者さんなら、どのようにfor文で加工処理を回すのか質問したいです！
あいまいですいません

Comments

[yambejp]

データ変換後idやemailはいらないですか？

[s15ak071]

コメントありがとうございます！
とりあえずいらないです！整形の方針をしりたいだけなので！

Answer 1

forで書く方法があると思いますが、reduceで書いてみました。
あまり整形得意でないので、参考程度に。。。

const data = response.reduce((acc, cur) => {
  const { id, user, ...rest } = cur;
  const duplicated = acc.find(
    ({ account_name }) => account_name === user.account_name
  );
  if (!duplicated) {
    acc.push({
      account_name: user.account_name,
      article: [rest],
    });
  } else {
    duplicated.article.push(rest);
  }
  return acc;
}, []);

Comments

[s15ak071]

まったくわからなかったのでほんとに助かります！
参考になります

Answer 2

こんにちは

ベストアンサー決定後に失礼します。

以下のメソッド

• Object.entries
• Array.prototype.map

および、配列やオブジェクトの操作で便利なライブラリ lodash の

• _.groupBy
• _.pick

を使ったコードを、以下に回答します。

const articles = [
  { id:123, title:"title1", content:"content1", user: { account_name:"Tom", email:"[e-mail]"} },
  { id:124, title:"title2", content:"content2", user: { account_name:"Tom", email:"[e-mail]"} },
  { id:125, title:"title3", content:"content3", user: { account_name:"Tom", email:"[e-mail]"} },    
  { id:126, title:"title1", content:"content1", user: { account_name:"Sam", email:"[e-mail]"} }
];


const articlesByUsers = Object.entries(
                            _.groupBy(articles, 'user.account_name')
                        ).map(([account_name, articles]) => ({
                            account_name,
                            articles: articles.map(a => _.pick(a, ['title', 'content']))
                        }));

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/VwYmBeG?editors=0012

for 文を使わないコードなので本題からは外れますが、参考になれば幸いです。

Comments

[s15ak071]

わぁ！！ありがとうございます！ほんとに嬉しいです！！！

[s15ak071]

groupbyをしたかったんですが
できるんですね！！！

[jun68ykt]

@s15ak071さん
コメントありがとうございます。

> groupbyをしたかったんですが
できるんですね！！！

はい。
このご質問のような場合に、lodash の _.groupBy　は重宝します ????

[s15ak071]

code penまで記載していただき！宝にします
またわからなかったらjunさん聞きたいです！ｗ

[jun68ykt]

了解です。
ちなみに Vueは詳しくありません。今回のような感じの質問だったり、Reactの質問だとお答えできるかもしれません。

[s15ak071]

かしこまりました！

Answer 3

どのようにfor文で加工処理を回すのか

普通に回します。

ご質問のケースは、総当りしなければならないので
「オブジェクトのプロパティには一意性がある」という特徴を使い、振り分けながら候補をまとめ直す手法が使えそうです。

var ary // レスポンス
var candidate = {}; // 候補オブジェクトに結果を収集する

// 普通に回す。
for ( let i=0, l=ary.length; i<l; ++i ) {
  let todoItem = ary[i];

  // 一意性のある値としても利用する
  let account_name = todoItem.user.account_name;

  // 初期化
  if ( !candidate[account_name] ) {
    candidate[account_name] = {
      account_name:account_name
    , article:[]
    };
  }

  // 初期化した中の配列に追加
  candidate[account_name].article.push({
    title:todoItem.title
  , content: todoItem.content 
  });
}
// 結果
console.log( Object.values(candidate) );

ブラウザのコンソールを使って試した都合で var 宣言しています。

Comments

[s15ak071]

ありがとうございます！！