質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

agneau
agneau

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

1リアクション

1クリップ

375閲覧

投稿2022/09/28 12:00

編集2022/09/29 10:54

前提

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

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

実現したいこと

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

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

現状

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

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

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

補足

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

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

該当のソースコード

javascript

<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のタグです

javascript

<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データのサンプルです

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にデータが格納されていない?のか、uniqUnitArray(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などを自分なりに書いてみましたが、上手くいきませんでした。

Cocode👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

yambejp

2022/09/29 02:16 編集

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

2022/09/29 10:55

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。