回答編集履歴

4

コード修正

2021/10/28 10:18

投稿

fj68
fj68

スコア752

test CHANGED
@@ -196,13 +196,17 @@
196
196
 
197
197
  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
198
198
 
199
+ },
200
+
201
+ "handle": "skirt",
202
+
199
- "images": [{
203
+ "images": [{
200
-
204
+
201
- "id": "gid://shopify/ProductImage/15464783282345",
205
+ "id": "gid://shopify/ProductImage/15464783282345",
202
-
206
+
203
- "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
207
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
204
-
208
+
205
- }],
209
+ }],
206
210
 
207
211
  }],
208
212
 

3

確認用のコードを追記

2021/10/28 10:18

投稿

fj68
fj68

スコア752

test CHANGED
@@ -124,6 +124,22 @@
124
124
 
125
125
  "handle": "skirt",
126
126
 
127
+ "images": {
128
+
129
+ "edges": [{
130
+
131
+ "node": {
132
+
133
+ "id": "gid://shopify/ProductImage/15464783282345",
134
+
135
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
136
+
137
+ },
138
+
139
+ }],
140
+
141
+ },
142
+
127
143
  // ...
128
144
 
129
145
  },
@@ -162,6 +178,10 @@
162
178
 
163
179
 
164
180
 
181
+ console.log(JSON.stringify(result, null, 2));
182
+
183
+
184
+
165
185
  /* result
166
186
 
167
187
  {

2

コードに説明を追記

2021/10/28 10:06

投稿

fj68
fj68

スコア752

test CHANGED
@@ -142,7 +142,7 @@
142
142
 
143
143
  edge => edge["node"]
144
144
 
145
- ).map(
145
+ ).map( // ここまでで{ "products": [{ "description": ... }, ...] }になっている
146
146
 
147
147
  node => ({
148
148
 

1

コードと説明を修正

2021/10/28 10:02

投稿

fj68
fj68

スコア752

test CHANGED
@@ -1,3 +1,15 @@
1
+ ## 追記
2
+
3
+
4
+
5
+ 変換後のデータ形式の認識に齟齬があったようなので、修正しました。
6
+
7
+
8
+
9
+ ---
10
+
11
+
12
+
1
13
  こういったデータ変換系の話は、一歩々々に分けて考えるとやりやすいです。
2
14
 
3
15
 
@@ -34,6 +46,58 @@
34
46
 
35
47
 
36
48
 
49
+ 上記のことから、`{ "products": { "edges": [{ "node": { "description": ... } }, ...] } }`を`{ "products": [{ "description": ... }, ...]`に変換するのは以下のように書けます。
50
+
51
+
52
+
53
+ ```js
54
+
55
+ const data = {
56
+
57
+ "products": {
58
+
59
+ "edges": [{
60
+
61
+ "node": {
62
+
63
+ "description": "Sleek and black",
64
+
65
+ "featuredImage": {
66
+
67
+ "id": "gid://shopify/ProductImage/15464783282345",
68
+
69
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
70
+
71
+ },
72
+
73
+ "handle": "skirt",
74
+
75
+ // ...
76
+
77
+ },
78
+
79
+ }],
80
+
81
+ },
82
+
83
+ };
84
+
85
+
86
+
87
+ const result = {
88
+
89
+ "products": data["products"]["edges"].map(edge => edge["node"])
90
+
91
+ };
92
+
93
+ ```
94
+
95
+
96
+
97
+ `"images"`の中身も入れ子にはなっていますが、同様に処理できます。
98
+
99
+ 一点、`{ ...node, "image": 〜 }`として`node["image"]`だけを書き換えていることに注意です。
100
+
37
101
  で、これらを踏まえ、こんな感じでどうでしょうか。
38
102
 
39
103
 
@@ -58,11 +122,11 @@
58
122
 
59
123
  },
60
124
 
125
+ "handle": "skirt",
126
+
127
+ // ...
128
+
61
129
  },
62
-
63
- "handle": "skirt",
64
-
65
- // ...
66
130
 
67
131
  }],
68
132
 
@@ -74,7 +138,25 @@
74
138
 
75
139
  const result = {
76
140
 
77
- "products": data["products"]["edges"].map(edge => edge["node"]),
141
+ "products": data["products"]["edges"].map(
142
+
143
+ edge => edge["node"]
144
+
145
+ ).map(
146
+
147
+ node => ({
148
+
149
+ ...node,
150
+
151
+ "images": node["images"]["edges"].map(
152
+
153
+ edge => edge["node"]
154
+
155
+ )
156
+
157
+ })
158
+
159
+ ),
78
160
 
79
161
  }
80
162
 
@@ -92,7 +174,15 @@
92
174
 
93
175
  "id": "gid://shopify/ProductImage/15464783282345",
94
176
 
95
- "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
177
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
178
+
179
+ "images": [{
180
+
181
+ "id": "gid://shopify/ProductImage/15464783282345",
182
+
183
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
184
+
185
+ }],
96
186
 
97
187
  }],
98
188