JavaScriptのオブジェクト2次元配列で特定プロパティを取り除きたい

Question

前提

JavaScriptのオブジェクトの2次元配列で特定プロパティを取り除きたいです。

例として、以下のような配列があったとします。

const items = [
  {
    id: 1
    selectedOptions : [
        {
            name :  "色",
            value : "赤",
            __typename: 'SelectedOption'
        },
        {
            name :  "個数",
            value : "10個",
            __typename: 'SelectedOption'
        },
    ]
  }, 
  {
    id: 2
    selectedOptions : [
        {
            name :  "色",
            value : "赤",
            __typename: 'SelectedOption'
        },
        {
            name :  "個数",
            value : "20個",
            __typename: 'SelectedOption'
        },
    ]
  }, 
  {
    id: 3
    selectedOptions : [
        {
            name :  "色",
            value : "赤",
            __typename: 'SelectedOption'
        },
        {
            name :  "個数",
            value : "30個",
            __typename: 'SelectedOption'
        },
    ]
  }, 
  {
    id: 4
    selectedOptions : [
        {
            name :  "色",
            value : "黒",
            __typename: 'SelectedOption'

        },
        {
            name :  "個数",
            value : "10個",
            __typename: 'SelectedOption'
        },
    ]
  }, 
 .....
]

実現したいこと

上の例だと、2次元目のオブジェクトのプロパティである__typename: 'SelectedOption'だけを取り除いた配列にしたい。そのほかはそのままの状態です。

試したこと

以下のよう、mapを駆使してもうまくいかなかったです。

const lineItemProductVariants = items.map((item) =>
    item.map((item.selectedOption) => ({
        selectedOptions: { name: selectedOption.name, value: selectedOption.value },
    }))
);

Comments

[hoshi-takanori]

filter じゃなくて、両方 map で良いのでは…。

[yusuke1]

両方mapにしてみましたが、やはり理想通りの結果になりませんでした...

Answer 1

JSON.stringfyのreplacerを使用する例

items = JSON.parse(JSON.stringify(items, (k,v)=> k == "__typename" ? undefined : v))

Answer 2

たとえばこう

const items = []; //略
const getAllDataWithObject=(obj)=>{
  let ret=[];
  Object.entries(obj).forEach(ent=>{
    ret=ret.concat(
      ent[1] instanceof Object?
      getAllDataWithObject(ent[1]):
      [ent.concat(obj)]
      );
  });
  return ret;
};
console.log(JSON.stringify(items));
getAllDataWithObject(items).forEach(x=>{
  if(x[0]=="__typename" && x[1]=="SelectedOption") delete(x[2].__typename);
});
console.log(JSON.stringify(items));

Answer 3

与えられたオブジェクトから不要なプロパティを除去したオブジェクトを作って返す関数を作っておきます。（不要なプロパティは複数指定可能にしておきます。）

const omit = (obj, props) =>
  Object.fromEntries(Object.entries(obj).filter(([key]) => !props.includes(key)));

上記の omit 関数を使用することで、items の要素の selectedOptions の各要素から __typenameを除去した配列を新たに作成する処理は以下のように書けます。

const lineItemProductVariants = items.map(e => ({
  ...e,
  selectedOptions: e.selectedOptions.map(opt => omit(opt, ['__typename']))
}));

• codepen 👉 https://codepen.io/alphabeta12/pen/BaPWqKM?editors=0012

補足

lodash の _.omit を使うと、冒頭の omit 関数を自作しないで済みます。

• codepen 👉 https://codepen.io/alphabeta12/pen/abjJRqL?editors=0012