配列に格納したデータを取り出したい

Question

前提

Google Bloggerを利用。投稿ページに関連記事を表示するため、特定のラベルが付いた投稿のデータを抽出加工しようと思っています。

特定のラベルが付いた投稿のデータを、コールバック関数でJSONデータとして受け取り、一部をオブジェクトとしてpushをつかって配列に追加しました

実現したいこと

格納したデータを取り出して重複処理をしたい

（配列に追加したオブジェクトのうち重複しているオブジェクトを削除したい）

現状

配列への追加が上手くいっていないのか、配列からデータを取り出すことができませんでした。（Array(0)となってしまう）

いろいろ調べましたが解決の糸口が見つかりません。

解決策をご教示いただけると大変助かります。

補足

重複処理の方法に特にこだわりはないのですが、

重複しているオブジェクトの削除は【Javascript】オブジェクトの配列をuniqueにする（重複を削除する）ときはfilterではなくMapオブジェクトを使う - Qiitaを利用しようと思いました。

該当のソースコード

<script>
const currentPost = "<data:post.url/>"; // いま開いているページ
//<![CDATA[

let unit = []; // この変数にデータを格納したい

function feedData(json) {
  // コールバック関数を受け取る関数
  for (let i = 0; i < json.feed.entry.length; i++) {
    let jsonFeedEntry = json.feed.entry[i];

    for (let k = 0; k < jsonFeedEntry.link.length; k++) {
      if (jsonFeedEntry.link[k].href != currentPost) {
        let imageUrl =
          "media$thumbnail" in jsonFeedEntry
            ? jsonFeedEntry.media$thumbnail.url
            : "NoImage";
        let unitObject = {};

        if (jsonFeedEntry.link[k].rel == "alternate") {
          unitObject.title = jsonFeedEntry.title.$t;
          unitObject.link = jsonFeedEntry.link[k].href;
          unitObject.image = imageUrl;

          unit.push(unitObject);
        }
      }
    }
  }
}

console.log(unit);

const uniqUnit = Array.from(
  new Map(unit.map((data) => [data.link, data])).values() // 回答をもとに修正
);
console.log(uniqUnit); // Array(0)となってしまう

//]]>
</script>

コールバック関数

<b:loop>はラベルの数だけループするBloggerのタグです

<b:loop values='data:post.labels' var='label'>

<script async='async' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=feedData&max-results=10"' type='text/javascript'/>

</b:loop>

JSON

JSONデータのサンプルです

{
  "version": "1.0",
  "encoding": "UTF-8",
  "feed": {
    "xmlns": "http://www.w3.org/2005/Atom",
    "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
    "xmlns$blogger": "http://schemas.google.com/blogger/2008",
    "xmlns$georss": "http://www.georss.org/georss",
    "xmlns$gd": "http://schemas.google.com/g/2005",
    "xmlns$thr": "http://purl.org/syndication/thread/1.0",
    "title": {
      "type": "text",
      "$t": ""
    },
    "subtitle": {
      "type": "html",
      "$t": ""
    },
    "link": [
      {
        "rel": "http://schemas.google.com/g/2005#feed",
        "type": "application/atom+xml",
        "href": "https://sample.com/feeds/posts/summary"
      },
      {
        "rel": "alternate",
        "type": "text/html",
        "href": "https://sample.com/search/label/apple"
      }
    ],
    "entry": [
      {
        "title": {
          "type": "text",
          "$t": "appleとbanana"
        },
        "summary": {
          "type": "text",
          "$t": ""
        },
        "link": [
          {
            "rel": "replies",
            "type": "application/atom+xml",
            "href": "https://sample.com/feeds/21/comments/default",
            "title": ""
          },
          {
            "rel": "alternate",
            "type": "text/html",
            "href": "https://sample.com/2022/03/apple-and-banana.html",
            "title": "appleとbanana"
          }
        ],
        "media$thumbnail": {
          "xmlns$media": "http://search.yahoo.com/mrss/",
          "url": "https://....jpg",
          "height": "72",
          "width": "72"
        },
        "thr$total": {
          "$t": "0"
        }
      },
      {
        "title": {
          "type": "text",
          "$t": "apple"
        },
        "summary": {
          "type": "text",
          "$t": ""
        },
        "link": [
          {
            "rel": "replies",
            "type": "application/atom+xml",
            "href": "https://sample.com/feeds/61/comments/default",
            "title": ""
          },
          {
            "rel": "alternate",
            "type": "text/html",
            "href": "https://sample.com/2022/01/apple.html",
            "title": "apple"
          }
        ],
        "media$thumbnail": {
          "xmlns$media": "http://search.yahoo.com/mrss/",
          "url": "https://....jpg",
          "height": "72",
          "width": "72"
        },
        "thr$total": {
          "$t": "0"
        }
      },
      {
        "title": {
          "type": "text",
          "$t": "appleとbanana"
        },
        "summary": {
          "type": "text",
          "$t": ""
        },
        "link": [
          {
            "rel": "replies",
            "type": "application/atom+xml",
            "href": "https://sample.com/feeds/45/comments/default",
            "title": ""
          },
          {
            "rel": "alternate",
            "type": "text/html",
            "href": "https://sample.com/2022/02/apple-and-banana.html",
            "title": "appleとbanana"
          }
        ],
        "media$thumbnail": {
          "xmlns$media": "http://search.yahoo.com/mrss/",
          "url": "https://....jpg",
          "height": "72",
          "width": "72"
        },
        "thr$total": {
          "$t": "0"
        }
      }
    ]
  }
}

発生している問題・エラーメッセージ

変数unitにデータが格納されていない？のか、uniqUnitがArray(0)となります

デベロッパーツールのコンソールをみると

オブジェクトを受け取った配列unitは

はじめは

Array(4)

となり、展開すると

Array(4)
0: {title: 'appleとbanana', link: 'https:...apple-banana.html', image: 'https:...jpg'}
1: {title: 'apple', link: 'https:...apple.html', image: 'https:...jpg'}
2: {title: 'appleとbanana', link: 'https:...apple-banana.html', image: 'https:...jpg'}
3: {title: 'banana', link: 'https:...banana.html', image: 'https:...jpg'}
length: 4

ブラウザをリロードをすると[]が表示され展開すると下記のようになります。

[]
0: {title: 'appleとbanana', link: 'https:...apple-banana.html', image: 'https:...jpg'}
1: {title: 'apple', link: 'https:...apple.html', image: 'https:...jpg'}
2: {title: 'appleとbanana', link: 'https:...apple-banana.html', image: 'https:...jpg'}
3: {title: 'banana', link: 'https:...banana.html', image: 'https:...jpg'}
length: 4

uniqUnitについては、はじめは

Array(0)

となり、展開すると

length: 0

ブラウザをリロードをすると[]が表示され展開するとlength: 0となります。

試したこと

こちらの状況→関数外で宣言し、関数内で要素をpushした配列が空の配列としてみなされる - スタック・オーバーフローと似ているような気がするので非同期が関係しているのかも？

と考えPromiseなどを自分なりに書いてみましたが、上手くいきませんでした。

Comments

[yambejp]

jsonデータのサンプルを提示くださいjsonにはfeedやentryがどうなっているかわかりません
もしくはjsonをどうやって受け取っているかですかね・・・非同期処理ならasync/awaitで
クリアになるかもしれませんが

[agneau]

質問内容にJSONデータのサンプルと、コールバック関数を追加しました。
よろしくお願いいたします。

Answer 1

feedData関数を呼び出したあとに uniqUnit を作らないといけませんが、feedData関数を呼び出す前に uniqUnit を作っているため [] になってしまいます。
その後、feedData関数を呼び出しても unit だけが更新され、uniqUnit は更新されません。
uniqUnitを更新する処理も関数にして、feedData関数から呼び出してはいかがでしょうか。
処理を修正したコードを示しておきます。

let unit = []; // この変数にデータを格納したい
let uniqUnit = [];

function feedData(json) {
  for (let i = 0; i < json.feed.entry.length; i++) {
    const jsonFeedEntry = json.feed.entry[i];
    const imageUrl = "media$thumbnail" in jsonFeedEntry
                   ? jsonFeedEntry.media$thumbnail.url
                   : "NoImage";
    for (let k = 0; k < jsonFeedEntry.link.length; k++) {
      if (jsonFeedEntry.link[k].rel == "alternate") {
        const unitObject = {};
        unitObject.title = jsonFeedEntry.title.$t;
        unitObject.link = jsonFeedEntry.link[k].href;
        unitObject.image = imageUrl;
        unit.push(unitObject);
      }
    }
  }
  updateUniqUnit();
}

function updateUniqUnit() {
  console.log('unit:', unit);
  uniqUnit = Array.from(
    new Map(unit.map((data) => [data.link, data])).values() // 回答をもとに修正
  );
  console.log('uniqUnit:', uniqUnit); // Array(0)となってしまう
}

unit.map で key と value の配列にして Map を作ります。

- new Map(unit.map((data) => [data, data.link, data])).values()
+ new Map(unit.map((data) => [data.link, data])).values()

const unit = [
  {title: 'appleとbanana', link: 'https:...apple-banana.html', image: 'https:...jpg'},
  {title: 'apple', link: 'https:...apple.html', image: 'https:...jpg'},
  {title: 'appleとbanana', link: 'https:...apple-banana.html', image: 'https:...jpg'},
  {title: 'banana', link: 'https:...banana.html', image: 'https:...jpg'},
];

const uniqUnit = Array.from(
    new Map(unit.map(data => [data.link, data])).values()
);
console.log(uniqUnit);

[
  {
    title: 'appleとbanana',
    link: 'https:...apple-banana.html',
    image: 'https:...jpg'
  },
  {
    title: 'apple',
    link: 'https:...apple.html',
    image: 'https:...jpg'
  },
  {
    title: 'banana',
    link: 'https:...banana.html',
    image: 'https:...jpg'
  }
]

Comments

[agneau]

ご回答ありがとうございます。

ご回答をもとに Map を修正しました。

しかし残念ながら uniqUnit は Array(0) となってしまいました。

おそらく unit にデータが格納されていないのでは？と思い、質問内容を修正しました。

よろしくお願いいたします。

[shiracamus]

unitはArray(4)ではなかった、ということですか？
回答したコードの実行結果を追記しましたが、unitがArray(4)でuniqUnitはArray(3)になりました。

[shiracamus]

気になるところがありました。
let unitObject = {};
は
if (jsonFeedEntry.link[k].rel == "alternate") {
の次の行った方がいいのでは？
そうしないと、pushした内容が上書きされてしまいますよ。
それと、
let imageUrl = "";
と、変数宣言と "media$thumbnail" がなかったときの値を設定が必要かと思います。
さらに、
if ("media$thumbnail" in jsonFeedEntry) {
の処理は、jsonFeedEntry.linkの数に影響しないので、内側ループ直前に行えばいいと思います。
let imageUrl = "media$thumbnail" in jsonFeedEntry " ? jsonFeedEntry["media$thumbnail"] : "";
とかにしてはいかがでしょうか？

[agneau]

ご回答ありがとうございます。

はじめに、ご提示いただいたコードを単体で実行すると重複処理ができました。ありがとうございます。

しかし、ご提示いただいたコードを該当コードに適用するとuniqUnitはArray(0)となってしまいます。

>unitはArray(4)ではなかった、ということですか？

コンソール上はunitはArray(4)（ブラウザをリロードすると []）です。

これは素人考えですが、重複処理をするMapが正常に動いているとなると、なんらかの原因でunitにデータが格納されていないか、格納されるまえにMapが走るのではと思っています。

また、気になるところのご指摘ありがとうございます。

変数の位置の見直し、宣言、条件演算子の使用などコードを見直してみました。（if ("media$thumbnail" in jsonFeedEntry) { の処理は今開いているページを除外する条件分岐を追加した関係上内側のループにしました）

回答が得やすくなるように情報を追加したり、質問内容をもう少し具体的にしてみました。

よろしくお願いいたします。

[agneau]

ありがとうございます!! 希望通りの動作が実現しました。
上手くいかなかった理由も理解できてスッキリしました。

また、ご指摘いただいたコードの書き方についても理解が進みました。

繰り返しになりますがありがとうございました。