オブジェクトを見やすく変換したい

Question

#概要
GraphQLのレスポンスが下記のようになっております。

{
  "products": {
    "edges": [
      {
        "node": {
          "description": "Sleek and black",
          "featuredImage": {
            "id": "gid://shopify/ProductImage/15464783282345",
            "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
          },
          "handle": "skirt",
          "id": "gid://shopify/Product/4773734482089",
          "images": {
            "edges": [
              {
                "node": {
                  "id": "gid://shopify/ProductImage/15464783282345",
                  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
                }
              },
              {
                "node": {
                  "id": "gid://shopify/ProductImage/26072838406313",
                  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb7.jpg?v=1612636091"
                }
              },
              {
                "node": {
                  "id": "gid://shopify/ProductImage/26072838373545",
                  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb6.jpg?v=1612636091"
                }
              }
            ]
          }
        }
      }
    ]
  }
}

#やりたいこと
edgesの値は配列。nodeの値はオブジェクトとなっています。
これを下記のようにedgesやnodeのない値に変換したいと考えております。

{
  "products": [
      {
          "description": "Sleek and black",
          "featuredImage": {
            "id": "gid://shopify/ProductImage/15464783282345",
            "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
      },

#Use Playgreound
Use Playgreoundにアップロードしました。
Use Playgreound

#質問
なんとなく、objectを配列ように扱って各keyの名前がedgesやnodeで処理加えればいいのかなと思います。
しかし、いくつか問題点があります。

• 多次元オブジェクトであること
• オブジェクトを配列のように扱って、そのあとオブジェクトに戻すという方法が思いつきません。

どのようにすれば、「やりたいこと」に書いてるコードのように変換できますでしょうか？

Comments

[退会済みユーザー]

要件を確認させてください。主旨としては、「すべての node が並んだ、一次元の配列が欲しい」ということでよいでしょうか？

[yuki_90453]

いえ、違います。一次元の配列にはならないと思います。下記のコードのように元のコードから見てedgesやnodeがない状態にしたいです。

{
"products": [
{
"description": "Sleek and black",
"featuredImage": {
"id": "gid://shopify/ProductImage/15464783282345",
"originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
},

[退会済みユーザー]

ご返信ありがとうございます。上手い解法が思いつきましたら回答します。

Answer 1

多次元オブジェクトであること

再帰関数を使って掘り進める事になります。
フィボナッチ数列にしか使えないテクニックではなく、
意外とこういう再帰的に掘り進めたいケースで使われます。

因みにJavaScriptに於ける再帰関数は無限に掘り進めるわけではなく、
ChromeやFirefox等に積んでいるJavaScriptエンジンに左右されます。
だいたい1000階層くらいになるとエラーで死ぬので、それより浅いと想定されるケースでしか使えません。

今回のケースではそんなアホみたいな巨大なJSONは帰ってこないと思うので
再帰関数を利用するのが最善でしょう。

オブジェクトを配列のように扱って、そのあとオブジェクトに戻すという方法が思いつきません。

Object.fromEntriesと
Object.entries
これで双方向に変換出来ます。

---

それではやっていきましょう。
とりま質問文の値をres変数にでも保管しましょうか。

const res = {
  "products": {
    "edges": [
      {
        "node": {
          "description": "Sleek and black",
          "featuredImage": {
            "id": "gid://shopify/ProductImage/15464783282345",
            "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
          },
          "handle": "skirt",
          "id": "gid://shopify/Product/4773734482089",
          "images": {
            "edges": [
              {
                "node": {
                  "id": "gid://shopify/ProductImage/15464783282345",
                  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
                }
              },
              {
                "node": {
                  "id": "gid://shopify/ProductImage/26072838406313",
                  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb7.jpg?v=1612636091"
                }
              },
              {
                "node": {
                  "id": "gid://shopify/ProductImage/26072838373545",
                  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb6.jpg?v=1612636091"
                }
              }
            ]
          }
        }
      }
    ]
  }
}

ドキュメントによると
エッジはノードとカーソルを持ち、カーソルはページネーション用なので
画面表示には使わないので捨てるという感じでしょうかね。

つまりedgeキーを見つけたら配列を展開して
nodeを取り出してそれに置きかえるという事をやりましょうか。

const removeEdge = obj => {
  if (typeof obj != 'object') return obj;
  return Object.fromEntries(
    Object.entries(obj).map(([key, val]) => {
      if (!Array.isArray(val.edges)) return [key, val];
      return [
        key,
        // edgesが配列であるのでmapで変換して
        // 再度removeEdgeで精査している
        val.edges.map(it => removeEdge(it?.node))
      ];
    })
  );
};

実際コードにしたら結構色々テクニックを使ってますね。

• Array.map
• Array.isArray
• オプショナルチェーン演算子

JavaScriptはnullやundefined値にプロパティを所持出来ません。
これらの値にアクセスを試みただけでJavaScriptがエラーで落ちるので、
edge[n].nodeを決め打ちで参照する時に利用しています。

JSON.stringify(removeEdge(res), null, 2);

{
  "products": [
    {
      "description": "Sleek and black",
      "featuredImage": {
        "id": "gid://shopify/ProductImage/15464783282345",
        "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
      },
      "handle": "skirt",
      "id": "gid://shopify/Product/4773734482089",
      "images": [
        {
          "id": "gid://shopify/ProductImage/15464783282345",
          "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
        },
        {
          "id": "gid://shopify/ProductImage/26072838406313",
          "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb7.jpg?v=1612636091"
        },
        {
          "id": "gid://shopify/ProductImage/26072838373545",
          "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb6.jpg?v=1612636091"
        }
      ]
    }
  ]
}

ただまぁ、エラー処理周りとか適当ですし、
そもそも要件を満たしているかは知らないので責任は持てません。

質問文を読んだ上で、「こういうアプローチで何とかなりそう」程度の指針を示す事は出来たかなと思います。

ここから更に改良して相応しいエラー処理等を付け足してみてください。

Answer 2

追記

変換後のデータ形式の認識に齟齬があったようなので、修正しました。

---

こういったデータ変換系の話は、一歩々々に分けて考えるとやりやすいです。

というわけで、まずは{ "node": { "description": ..., ... } }を{ "description": ..., ... }に変換するコードを考えます。

const edge = { "node": { "description": ..., ... } };

const node = edge["node"];

次は{ "edges": [...] }を[...]に変換するコードです。

const products = { "edges": [...] };

const edges = products["edges"];

上記のことから、{ "products": { "edges": [{ "node": { "description": ... } }, ...] } }を{ "products": [{ "description": ... }, ...]に変換するのは以下のように書けます。

const data = {
  "products": {
    "edges": [{
      "node": {
        "description": "Sleek and black",
        "featuredImage": {
          "id": "gid://shopify/ProductImage/15464783282345",
          "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
        },
        "handle": "skirt",
        // ...
      },
    }],
  },
};

const result = {
  "products": data["products"]["edges"].map(edge => edge["node"])
};

"images"の中身も入れ子にはなっていますが、同様に処理できます。
一点、{ ...node, "image": 〜 }としてnode["image"]だけを書き換えていることに注意です。
で、これらを踏まえ、こんな感じでどうでしょうか。

const data = {
  "products": {
    "edges": [{
      "node": {
        "description": "Sleek and black",
        "featuredImage": {
          "id": "gid://shopify/ProductImage/15464783282345",
          "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
        },
        "handle": "skirt",
        "images": {
          "edges": [{
            "node": {
              "id": "gid://shopify/ProductImage/15464783282345",
              "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082"
            },
          }],
        },
        // ...
      },
    }],
  },
};

const result = {
  "products": data["products"]["edges"].map(
    edge => edge["node"]
  ).map(    // ここまでで{ "products": [{ "description": ... }, ...] }になっている
    node => ({ 
      ...node,
      "images": node["images"]["edges"].map(
        edge => edge["node"]
      )
    })
  ),
}

console.log(JSON.stringify(result, null, 2));

/* result
{
  "products": [{
    "description": "Sleek and black",
    "featuredImage": {
      "id": "gid://shopify/ProductImage/15464783282345",
      "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
    },
    "handle": "skirt",
    "images": [{
      "id": "gid://shopify/ProductImage/15464783282345",
      "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb20.jpg?v=1602116082",
    }],
  }],
}
 */

Comments

[yuki_90453]

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

さらに下層の、products.edges[0].node.imagesの部分にもまだedgesが残っております。
下層もすべて変換させる方法はないでしょうか？

[fj68]

変換後のデータ形式の認識に齟齬があったようなので、回答を修正しました。
ご確認ください。

[yuki_90453]

ご回答ありがとうございます！勉強になりました。

Answer 3

一案を回答します。

function convert(obj, edgesHolderProp = 'products', depth = 0) {
  if (depth === 50) {
    return { [edgesHolderProp]: [] };
  }

  const nodes = obj[edgesHolderProp].edges.map(e => {
    const node = _.omit(e.node, 'images');
    if (e.node.images) {
      const { images } = convert(e.node, 'images', depth + 1);
      node.images = images;
    }
    return node;
  });
  
  return { [edgesHolderProp]: nodes };
}

という再帰関数を作っておきます。この関数convert()では、

• ブジェクトの複製を作る際に、コピーしたくない不要なプロパティを指定できる、lodash の _.omit を使っています。

• 再帰の深さの上限を 仮に50にしています。

これを使って、質問にある original から edges と node を削除したオブジェクト converted を得るには

const converted = convert(original);

とします。

使用例を挙げておきます。ご質問にあるUse Playgreoundにアップロードされているconst original に含まれる以下のオブジェクト

"node": {
  "id": "gid://shopify/ProductImage/26072838406313",
  "originalSrc": "https://cdn.shopify.com/s/files/1/0268/1005/6873/products/bb7.jpg?v=1612636091"
}

に、もう一階層 images を追加した JSON を以下に作成しました。

???? https://demo1825326.mockable.io/tera/questions/366645.json

これをテストデータとして、冒頭の関数 convert() を試したサンプルが以下です。

???? codepen.io/kilesa/pen/GRvEwPR

GraphQLの仕様の詳細は確認しておりませんので、要件と異なる点などあれば、コメントからご教示ください。

追記

上記の回答では、lodash の _.omit を使いましたが、同じくlodashの _.mapValues を使えば、convert()関数を以下のように書けました。（再帰の深さの上限は、先と同じく50としています。）

const convert = (obj, depth = 0) =>
  depth === 50
    ? {}
    : _.mapValues(obj, value =>
        value.edges
          ? value.edges.map(({ node }) => convert(node, depth + 1))
          : value,
      );

???? codepen.io/kilesa/pen/MWvoMgy

Comments

[yuki_90453]

回答ありがとうございます！勉強になりました。