質問編集履歴

2

JSONのサンプル、コールバック関数を追加。質問内容を具体的にしました

2022/09/29 10:54

投稿

agneau
agneau

スコア4

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,8 @@
1
1
  ### 前提
2
2
 
3
+ Google Bloggerを利用。投稿ページに関連記事を表示するため、特定のラベルが付いた投稿のデータを抽出加工しようと思っています。
4
+
3
- コールバック関数から受け取ったJSONデータ一部をオブジェクトとしてpushをつかって配列に追加しました
5
+ 特定のラベルが付いた投稿のデータを、コールバック関数JSONデータとして受け取り、一部をオブジェクトとしてpushをつかって配列に追加しました
4
6
 
5
7
  ### 実現したいこと
6
8
 
@@ -26,22 +28,31 @@
26
28
 
27
29
  ```javascript
28
30
  <script>
31
+ const currentPost = "<data:post.url/>"; // いま開いているページ
32
+ //<![CDATA[
33
+
29
34
  let unit = []; // この変数にデータを格納したい
30
35
 
36
+ function feedData(json) {
31
- function feedData(json) { // コールバック関数を受け取る関数
37
+ // コールバック関数を受け取る関数
32
38
  for (let i = 0; i < json.feed.entry.length; i++) {
33
- let unitObject = {};
34
39
  let jsonFeedEntry = json.feed.entry[i];
40
+
35
41
  for (let k = 0; k < jsonFeedEntry.link.length; k++) {
42
+ if (jsonFeedEntry.link[k].href != currentPost) {
43
+ let imageUrl =
36
- if ("media$thumbnail" in jsonFeedEntry) {
44
+ "media$thumbnail" in jsonFeedEntry
37
- imageUrl = jsonFeedEntry.media$thumbnail.url;
45
+ ? jsonFeedEntry.media$thumbnail.url
46
+ : "NoImage";
47
+ let unitObject = {};
48
+
49
+ if (jsonFeedEntry.link[k].rel == "alternate") {
50
+ unitObject.title = jsonFeedEntry.title.$t;
51
+ unitObject.link = jsonFeedEntry.link[k].href;
52
+ unitObject.image = imageUrl;
53
+
54
+ unit.push(unitObject);
38
- }
55
+ }
39
- if (jsonFeedEntry.link[k].rel == "alternate") {
40
- unitObject.title = jsonFeedEntry.title.$t;
41
- unitObject.link = jsonFeedEntry.link[k].href;
42
- unitObject.image = imageUrl;
43
-
44
- unit.push(unitObject);
45
56
  }
46
57
  }
47
58
  }
@@ -53,9 +64,162 @@
53
64
  new Map(unit.map((data) => [data.link, data])).values() // 回答をもとに修正
54
65
  );
55
66
  console.log(uniqUnit); // Array(0)となってしまう
67
+
68
+ //]]>
56
69
  </script>
57
-
70
+ ```
71
+
72
+ ### コールバック関数
73
+
74
+ `<b:loop>`はラベルの数だけループするBloggerのタグです
75
+
76
+ ```javascript
77
+ <b:loop values='data:post.labels' var='label'>
78
+
79
+ <script async='async' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=feedData&max-results=10"' type='text/javascript'/>
80
+
81
+ </b:loop>
82
+ ```
83
+
84
+ ### JSON
85
+
86
+ JSONデータのサンプルです
87
+
88
+ ```json
89
+ {
90
+ "version": "1.0",
91
+ "encoding": "UTF-8",
92
+ "feed": {
93
+ "xmlns": "http://www.w3.org/2005/Atom",
94
+ "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
95
+ "xmlns$blogger": "http://schemas.google.com/blogger/2008",
96
+ "xmlns$georss": "http://www.georss.org/georss",
97
+ "xmlns$gd": "http://schemas.google.com/g/2005",
98
+ "xmlns$thr": "http://purl.org/syndication/thread/1.0",
99
+ "title": {
100
+ "type": "text",
101
+ "$t": ""
102
+ },
103
+ "subtitle": {
104
+ "type": "html",
105
+ "$t": ""
106
+ },
107
+ "link": [
108
+ {
109
+ "rel": "http://schemas.google.com/g/2005#feed",
110
+ "type": "application/atom+xml",
111
+ "href": "https://sample.com/feeds/posts/summary"
112
+ },
113
+ {
114
+ "rel": "alternate",
115
+ "type": "text/html",
58
- <script async src="https://..."/> // コールバック関数
116
+ "href": "https://sample.com/search/label/apple"
117
+ }
118
+ ],
119
+ "entry": [
120
+ {
121
+ "title": {
122
+ "type": "text",
123
+ "$t": "appleとbanana"
124
+ },
125
+ "summary": {
126
+ "type": "text",
127
+ "$t": ""
128
+ },
129
+ "link": [
130
+ {
131
+ "rel": "replies",
132
+ "type": "application/atom+xml",
133
+ "href": "https://sample.com/feeds/21/comments/default",
134
+ "title": ""
135
+ },
136
+ {
137
+ "rel": "alternate",
138
+ "type": "text/html",
139
+ "href": "https://sample.com/2022/03/apple-and-banana.html",
140
+ "title": "appleとbanana"
141
+ }
142
+ ],
143
+ "media$thumbnail": {
144
+ "xmlns$media": "http://search.yahoo.com/mrss/",
145
+ "url": "https://....jpg",
146
+ "height": "72",
147
+ "width": "72"
148
+ },
149
+ "thr$total": {
150
+ "$t": "0"
151
+ }
152
+ },
153
+ {
154
+ "title": {
155
+ "type": "text",
156
+ "$t": "apple"
157
+ },
158
+ "summary": {
159
+ "type": "text",
160
+ "$t": ""
161
+ },
162
+ "link": [
163
+ {
164
+ "rel": "replies",
165
+ "type": "application/atom+xml",
166
+ "href": "https://sample.com/feeds/61/comments/default",
167
+ "title": ""
168
+ },
169
+ {
170
+ "rel": "alternate",
171
+ "type": "text/html",
172
+ "href": "https://sample.com/2022/01/apple.html",
173
+ "title": "apple"
174
+ }
175
+ ],
176
+ "media$thumbnail": {
177
+ "xmlns$media": "http://search.yahoo.com/mrss/",
178
+ "url": "https://....jpg",
179
+ "height": "72",
180
+ "width": "72"
181
+ },
182
+ "thr$total": {
183
+ "$t": "0"
184
+ }
185
+ },
186
+ {
187
+ "title": {
188
+ "type": "text",
189
+ "$t": "appleとbanana"
190
+ },
191
+ "summary": {
192
+ "type": "text",
193
+ "$t": ""
194
+ },
195
+ "link": [
196
+ {
197
+ "rel": "replies",
198
+ "type": "application/atom+xml",
199
+ "href": "https://sample.com/feeds/45/comments/default",
200
+ "title": ""
201
+ },
202
+ {
203
+ "rel": "alternate",
204
+ "type": "text/html",
205
+ "href": "https://sample.com/2022/02/apple-and-banana.html",
206
+ "title": "appleとbanana"
207
+ }
208
+ ],
209
+ "media$thumbnail": {
210
+ "xmlns$media": "http://search.yahoo.com/mrss/",
211
+ "url": "https://....jpg",
212
+ "height": "72",
213
+ "width": "72"
214
+ },
215
+ "thr$total": {
216
+ "$t": "0"
217
+ }
218
+ }
219
+ ]
220
+ }
221
+ }
222
+
59
223
  ```
60
224
 
61
225
  ### 発生している問題・エラーメッセージ

1

回答をもとに修正後、問題点が見えてきたので質問内容を変更しました。

2022/09/28 22:37

投稿

agneau
agneau

スコア4

test CHANGED
@@ -1 +1 @@
1
- 重複ているオブジェクト削除したい
1
+ 配列に格納たデータ取り出したい
test CHANGED
@@ -4,25 +4,29 @@
4
4
 
5
5
  ### 実現したいこと
6
6
 
7
+ 格納したデータを取り出して重複処理をしたい
8
+
7
- 追加したオブジェクトのうち重複しているオブジェクトを削除したい
9
+ (配列に追加したオブジェクトのうち重複しているオブジェクトを削除したい
8
10
 
9
11
  ### 現状
10
12
 
11
- 重複処理方法に特にこだわりはないのすが
12
-
13
- 今回、重複しているオブジェクトの削除は[【Javascript】オブジェクトの配列をuniqueにする(重複を削除する)ときはfilterではなくMapオブジェクトを使う - Qiita](https://qiita.com/allJokin/items/28cd023335641e8796c5#map%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E9%87%8D%E8%A4%87%E3%82%92%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8B)を利用しようと思いました。
14
-
15
- しかし配列への追加が上手くいっていないのか、配列からデータを取り出すことができませんでした。
13
+ 配列へ追加が上手くいっていないのか、配列からデータを取り出ことできませんでした。(`Array(0)`となってしまう)
16
14
 
17
15
  いろいろ調べましたが解決の糸口が見つかりません。
18
16
 
19
17
  解決策をご教示いただけると大変助かります。
20
18
 
19
+ ### 補足
20
+
21
+ 重複処理の方法に特にこだわりはないのですが、
22
+
23
+ 重複しているオブジェクトの削除は[【Javascript】オブジェクトの配列をuniqueにする(重複を削除する)ときはfilterではなくMapオブジェクトを使う - Qiita](https://qiita.com/allJokin/items/28cd023335641e8796c5#map%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E9%87%8D%E8%A4%87%E3%82%92%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8B)を利用しようと思いました。
24
+
21
25
  ### 該当のソースコード
22
26
 
23
27
  ```javascript
24
28
  <script>
25
- let unit = [];
29
+ let unit = []; // この変数にデータを格納したい
26
30
 
27
31
  function feedData(json) { // コールバック関数を受け取る関数
28
32
  for (let i = 0; i < json.feed.entry.length; i++) {
@@ -46,15 +50,17 @@
46
50
  console.log(unit);
47
51
 
48
52
  const uniqUnit = Array.from(
49
- new Map(unit.map((data) => [data, data.link, data])).values()
53
+ new Map(unit.map((data) => [data.link, data])).values() // 回答をもとに修正
50
54
  );
51
- console.log(uniqUnit);
55
+ console.log(uniqUnit); // Array(0)となってしまう
52
56
  </script>
53
57
 
54
58
  <script async src="https://..."/> // コールバック関数
55
59
  ```
56
60
 
57
61
  ### 発生している問題・エラーメッセージ
62
+
63
+ 変数`unit`にデータが格納されていない?のか、`uniqUnit`が`Array(0)`となります
58
64
 
59
65
  デベロッパーツールのコンソールをみると
60
66