JSON.parse(JSON.stringify())みたいな形で、文字列からオブジェクトと配列に複合的に変換する方法

Question

以下は文字列なのですが、、、name属性から取ってきています。

aaa[0][header][bbb][0][ccc][0][value]

以下の形式になるように、文字列からオブジェクトに変換するスマートな方法は何かないものでしょうか？
JSON.parse(JSON.stringify())みたいな１行でできる方法はないかを探しています。。。

最初のaaaは別のところでkeyに使うので不要です。（あっても大丈夫です）

let test =[
            { 
              header: {
                bbb: [
                  {
                    ccc: [
                      {
                        value: null
                      }
                    ]
                  }
                ]
              } 
            }
          ]

Comments

[think49]

「スマートな方法」とありますが、そもそも要件を満たすコードをPOSTMANさん自身の手で作ることが出来たのでしょうか。

Answer 1

POST のパラメータですかね？ qs というライブラリが、まさにその仕事をしている気がします。

import * as qs from 'qs';

const a = qs.parse('aaa[0][header][bbb][0][ccc][0][value]');
console.log(JSON.stringify(a));

結果

{"aaa":[{"header":{"bbb":[{"ccc":{"[0][value]":""}}]}}]}

Comments

[退会済みユーザー]

おおお！試していないのでわかりませんが、まさにこういうのを探していました！

vueとlaravelを使っているのですが、フォームのname属性はlaravelでmodelをfindしてきたときの構造と同じ作りにしているので、vuexにも同じ構造で持たせたく、e.target.nameで取得してきた値がaaa[0][header][bbb][0][ccc][0][value]なのです。

明日試してみます！
ありがとうございます！

[退会済みユーザー]

深い層までは変換してくれないのですね。。。

```
import * as qs from 'qs';

const a = qs.parse('aaa[0][header][bbb][0][ccc][0][value]');
const a = qs.parse('aaa[0][header][bbb][0][ccc][ddd][0][value]');

console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

{"aaa":[{"header":{"bbb":[{"ccc":{"[0][value]":""}}]}}]}
{"aaa":[{"header":{"bbb":[{"ccc":{"[ddd][0][value]":""}}]}}]}
```

[tanishi_a]

qs の npm のドキュメントのページに、オプションで depth が指定できると書いてありますが、どうですかね。

[退会済みユーザー]

以下のドキュメントを見ていてmaxKeysを指定していました。。。
https://qiita.com/chuck0523/items/d8cff2ecfd208e8e513c

depthでいけました！
ありがとうございます！

Answer 2

要件不明瞭

以下の形式になるように、文字列からオブジェクトに変換するスマートな方法は何かないものでしょうか？

漠然と「スマート」と書かれても回答者には伝わりませんので、要件は「具体的」に書いて下さい。

JSON.parse(JSON.stringify())みたいな１行でできる方法はないかを探しています。。。

1行で書きました。

• parseProperty - JSFiddle

厳密性

コードを短くする事よりも、文法を厳密にして、厳しくチェックする方が重要だと思います。

厳しくチェックする方が重要だと押し付けられても、、、。

厳密性を問うのは、要件が厳密でないコードは、予期せぬ不具合を仕込むからです。

/**
 * エラーを返すべき文字列
 */
'abc';
'abc[0][';
'abc[0]xyz[a]';
'abc[';
'abc[]';

/**
 * 正しくパースされるべき文字列
 */
'abc[x[yz]'; // {'x[yz':null}

先に私が提案したコードは、この仕様に準じています。

例えば、ベストアンサーに選ばれたjun68yktさんのコードは、独特の動きをします。

setValueByPath(obj, 'aaa[0]bbb[header]ccc[bbb]' , 'hello world');

再帰処理

ご指定の文法は、複数のトークンに分けて、複数回マッチさせる必要があるので、再帰処理が必要になります。

A. String.prototype.replace にgフラグ付正規表現、コールバック関数を指定
B. RegExp.prototype.exec にgフラグ付正規表現を指定し、while ループ

今回、必要な返り値は文字列ではないので、B. を採用しました。

Re: POSTMAN さん

Comments

[退会済みユーザー]

厳しくチェックする方が重要だと押し付けられても、、、。
すみませんが、タイトルは「JSON.parse(JSON.stringify())みたいな形で、文字列からオブジェクトと配列に複合的に変換する方法でコードを短くすることの優位性について各人の意見を伺いたい」ではないので、個人の意見を聞く質問はしておりません。。。

[think49]

親記事に追記しました。

コードを書かずに要件だけ書かれたら、丸投げを疑います。
[質問への追記・修正の依頼] もスルーされています。
回答は、コードで示していましたよ。

Answer 3

こんにちは

細部（与えられる文字列のどこかに不正な箇所があった場合の対応など）は詰めていませんが、おそらくこんなようなコードを書くことになるのではと思います。

const setValueByPath = (obj, path, value) => {
  const props = path.split(/[[]]/).filter(str => str).map(str => /^[0-9]+$/.test(str) ? +str : str);

  for (let i=0; i < props.length - 1; i ++ ) {
     obj[props[i]] = typeof props[i+1] === 'number' ? [] : {};
     obj = obj[props[i]];
  }
  
  obj[props[props.length - 1]] = value;
}

const obj = {};

setValueByPath(obj, 'aaa[0][header][bbb][0][ccc][0][value]' , 'hello world');

以下は、上記の動作確認用に CodePen に上げたものです。

• https://codepen.io/jun68ykt/pen/QWWLjwJ?editors=0012

ちなみに、stackoverflow に類似の投稿がありました。

• How to set object property (of object property of..) given its string name in JavaScript?

• Dynamic deep setting for a JavaScript object [duplicate]

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

ありがとうございます！
いただいたコードの中で、配列をマージしたい場面がありまして、以下のようにすると
hello world2の配列しかないようですが何かご存知ないでしょうか？

```
setValueByPath(obj1, 'aaa[0][bbb][ccc][0][ddd][0][value]' , 'hello world1');
setValueByPath(obj2, 'aaa[0][bbb][ccc][0][ddd][1][value]' , 'hello world2');
console.log(Object.assign(obj1, obj2))
```

[jun68ykt]

コメントありがとうございます。
はい。回答に挙げたコードは、

obj[props[i]] = typeof props[i+1] === 'number' ? [] : {};

となっていて、すでに、obj[props[i]] が存在していても、空オブジェクトか空配列にしてしまうので、
> hello world2の配列しかない
ということになります。

一番早い応急処置としては

if (!obj[props[i]]) {
obj[props[i]] = typeof props[i+1] === 'number' ? [] : {};
}

としておけば、以下のようになります。

https://codepen.io/jun68ykt/pen/vYYBLyv?editors=0012

他にも、「こういう場合にこういう結果になるようにしたい」という要件があると思いますので、それらに対応したコードを追加していけばよいかと思います。

[jun68ykt]

ちなみに、

setValueByPath(obj1, 'aaa[0][bbb][ccc][0][ddd][0][value]' , 'hello world1');

setValueByPath(obj2, 'aaa[0][bbb][ccc][0][ddd][1][value]' , 'hello world2');

で作られた、 obj1 と obj2 の深い部分にあるプロパティをマージさせるのは、lodash の _.merge を使えばよいかと思います。

以下、そのサンプルです。

https://codepen.io/jun68ykt/pen/rNNBxpY?editors=0012

参考： https://lodash.com/docs/#merge

[退会済みユーザー]

知識不足&検索能力が足りず申しわけないです。
非常に助かります！
ありがとうございます。

[jun68ykt]

どういたしまして。参考になりましたら幸いです。

Answer 4

スマートな方法は何かない

おそらくありません。冗長に再帰処理をかけるとよいのでは？

const test =[
  {
    "header":{
      "bbb": [
        {
          "ccc": [
            {
              "value": null
              }
            ]
          }
        ]
      } 
  }
  ];

const get_val_recursive=obj=>{
  var ret="";
  if(obj && (k=Object.keys(obj)).length>0){
    const enc=isNaN(k[0])?"\"":"";
    ret+="["+enc+k[0]+enc+"]";
    ret=ret+ get_val_recursive(Object.values(obj)[0]);
  }
  return ret;
}
console.log(get_val_recursive(test));

Comments

[yambejp]

あ、逆だったすみません

[退会済みユーザー]

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