質問するログイン新規登録

回答編集履歴

4

コード修正

2021/10/28 10:18

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -97,10 +97,12 @@
97
97
  "featuredImage": {
98
98
  "id": "gid://shopify/ProductImage/15464783282345",
99
99
  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
100
+ },
101
+ "handle": "skirt",
100
- "images": [{
102
+ "images": [{
101
- "id": "gid://shopify/ProductImage/15464783282345",
103
+ "id": "gid://shopify/ProductImage/15464783282345",
102
- "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
104
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
103
- }],
105
+ }],
104
106
  }],
105
107
  }
106
108
  */

3

確認用のコードを追記

2021/10/28 10:18

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -61,6 +61,14 @@
61
61
  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
62
62
  },
63
63
  "handle": "skirt",
64
+ "images": {
65
+ "edges": [{
66
+ "node": {
67
+ "id": "gid://shopify/ProductImage/15464783282345",
68
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
69
+ },
70
+ }],
71
+ },
64
72
  // ...
65
73
  },
66
74
  }],
@@ -80,6 +88,8 @@
80
88
  ),
81
89
  }
82
90
 
91
+ console.log(JSON.stringify(result, null, 2));
92
+
83
93
  /* result
84
94
  {
85
95
  "products": [{

2

コードに説明を追記

2021/10/28 10:06

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -70,7 +70,7 @@
70
70
  const result = {
71
71
  "products": data["products"]["edges"].map(
72
72
  edge => edge["node"]
73
- ).map(
73
+ ).map( // ここまでで{ "products": [{ "description": ... }, ...] }になっている
74
74
  node => ({
75
75
  ...node,
76
76
  "images": node["images"]["edges"].map(

1

コードと説明を修正

2021/10/28 10:02

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -1,3 +1,9 @@
1
+ ## 追記
2
+
3
+ 変換後のデータ形式の認識に齟齬があったようなので、修正しました。
4
+
5
+ ---
6
+
1
7
  こういったデータ変換系の話は、一歩々々に分けて考えるとやりやすいです。
2
8
 
3
9
  というわけで、まずは`{ "node": { "description": ..., ... } }`を`{ "description": ..., ... }`に変換するコードを考えます。
@@ -16,6 +22,32 @@
16
22
  const edges = products["edges"];
17
23
  ```
18
24
 
25
+ 上記のことから、`{ "products": { "edges": [{ "node": { "description": ... } }, ...] } }`を`{ "products": [{ "description": ... }, ...]`に変換するのは以下のように書けます。
26
+
27
+ ```js
28
+ const data = {
29
+ "products": {
30
+ "edges": [{
31
+ "node": {
32
+ "description": "Sleek and black",
33
+ "featuredImage": {
34
+ "id": "gid://shopify/ProductImage/15464783282345",
35
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
36
+ },
37
+ "handle": "skirt",
38
+ // ...
39
+ },
40
+ }],
41
+ },
42
+ };
43
+
44
+ const result = {
45
+ "products": data["products"]["edges"].map(edge => edge["node"])
46
+ };
47
+ ```
48
+
49
+ `"images"`の中身も入れ子にはなっていますが、同様に処理できます。
50
+ 一点、`{ ...node, "image": 〜 }`として`node["image"]`だけを書き換えていることに注意です。
19
51
  で、これらを踏まえ、こんな感じでどうでしょうか。
20
52
 
21
53
  ```js
@@ -28,15 +60,24 @@
28
60
  "id": "gid://shopify/ProductImage/15464783282345",
29
61
  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
30
62
  },
63
+ "handle": "skirt",
64
+ // ...
31
65
  },
32
- "handle": "skirt",
33
- // ...
34
66
  }],
35
67
  },
36
68
  };
37
69
 
38
70
  const result = {
39
- "products": data["products"]["edges"].map(edge => edge["node"]),
71
+ "products": data["products"]["edges"].map(
72
+ edge => edge["node"]
73
+ ).map(
74
+ node => ({
75
+ ...node,
76
+ "images": node["images"]["edges"].map(
77
+ edge => edge["node"]
78
+ )
79
+ })
80
+ ),
40
81
  }
41
82
 
42
83
  /* result
@@ -45,7 +86,11 @@
45
86
  "description": "Sleek and black",
46
87
  "featuredImage": {
47
88
  "id": "gid://shopify/ProductImage/15464783282345",
48
- "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
89
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
90
+ "images": [{
91
+ "id": "gid://shopify/ProductImage/15464783282345",
92
+ "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
93
+ }],
49
94
  }],
50
95
  }
51
96
  */