JSONデータでオブジェクトの中にある配列のカウント方法がわからない

Question

JSONデータでオブジェクトの中にある配列のカウント方法がわかりません。

下記のJSONデータで、followの中にあるlike_flagの数が各ユーザ事に何個あるか表示をさせたいのですが、followの中のlike_flagのカウント方法がわかりません。

      var data = [
        {
          id: 23,
          name: "太郎",
          follow: [
            {
              id: 1,
              like_flag: 1,
            },
            {
              id: 5,
              like_flag: 1,
            },
            {
              id: 15,
              like_flag: 1,
            },
          ],
        },
        {
          id: 21,
          name: "次郎",
          follow: [
            {
              id: 2,
              like_flag: 1,
            },
            {
              id: 6,
              like_flag: 1,
            },
          ],
        },
        {
          id: 20,
          name: "三郎",
          follow: [
            {
              id: 7,
              like_flag: 1,
            },
          ],
        },
      ];

試したこと

下記のように考えたのですが、うまくlike_flagの数のカウントができませんでした。

for (var i = 0; i < data.length; i++) {
    var newData = [];
    for (var i = 0; i < data.follow.length; i++) {
      newData.push(i + 1);
    }
  console.log(data[i].name + ':' + newData);
}

期待をする処理
太郎：3
次郎：2
三郎：1

Answer 1

エラーはdata.follow.lnegthのdataにインデックス指定していないためですが、

期待をする処理

太郎：3
次郎：2
三郎：1

これを出したいだけなら2つ目のループは不要では？

for (var i = 0; i < data.length; i++) {
  var followers = data[i]?.follow?.length || 0;
  console.log(data[i].name + ':' + followers);
}

Comments

[tomato01]

ご回答を頂きありがとうございます。思った通りの処理になりました！教えて頂いた中の『?』と 『|| 0』はどのような意味があるのでしょうか。

[nekoniki]

`?.`はプロパティの取得元(先)がnullやundefiendの場合にエラーにならないように記載しています。
オプショナルチェイニング演算子というので、下記を参照してみてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

`|| 0`は、`data[i]?.follow?.length`がundefiendの時に、代わりに0を代入するための書き方です。
"follow"がない場合もあるのかな、と思ったのでその場合にlengthの結果を0として扱うようにしました。

[tomato01]

ご回答を頂きありがとうございました！オプショナルチェイニング演算子というのがあるのですね。教えて頂いたリンクで勉強してみます。ありがとうございました。

Answer 2

var result=data.map(x=>Object.fromEntries([[x.name,x.follow.filter(y=>y.like_flag==1).length]]));

Comments

[tomato01]

ご回答を頂きありがとうございます。mapを使うやり方もあるのですね！教えて頂きどうもありがとうございました。