それぞれ一つのテーブルを持った二つのjsonファイルをjs内で結合したい。

Question

それぞれ一つのテーブルを持った二つのjsonファイルを結合したいです。具体的には

//first.json
"nodes":[
        {id:0, label:"nodeA"},
        {id:1, label:"nodeB"},
        {id:2, label:"nodeC"},
        {id:3, label:"nodeD"},
        {id:4, label:"nodeE"},
        {id:5, label:"nodeF"}
        ]

//second.json
"links":[
        {source:0, target:1},
        {source:0, target:2},
        {source:1, target:3},
        {source:1, target:3},
        {source:2, target:1},
        {source:2, target:3},
        {source:3, target:4},
        {source:4, target:5},
        {source:5, target:3}
        ]

この二つのjsonファイルを同時に読みこんでjs内で一つのファイルとして以下のように結合したいのですが、どのような方法で行えばいいかわかりません。。

//second.json
{
"nodes":[
        {id:0, label:"nodeA"},
        {id:1, label:"nodeB"},
        {id:2, label:"nodeC"},
        {id:3, label:"nodeD"},
        {id:4, label:"nodeE"},
        {id:5, label:"nodeF"}
        ],

"links":[
        {source:0, target:1},
        {source:0, target:2},
        {source:1, target:3},
        {source:1, target:3},
        {source:2, target:1},
        {source:2, target:3},
        {source:3, target:4},
        {source:4, target:5},
        {source:5, target:3}
        ]
}

わかる方いましたらご教授お願いします。。

Comments

[AkitoshiManabe]

意を組んで回答が上がっていますが、first.json、 second.json ともに、以下の２点について JSON のノーテーションに訂正してください.
1. {, } で囲い、オブジェクトであることを示す
2. キーはダブルクォーテーションで囲う

Answer 1

こんにちは

ご質問に付加されたタグから推測すると、やりたいのはこういうことかなと思いましたが、いかがでしょうか？（JSONファイルは、jsons というディレクトリに入っているとします。）

<pre id="result"></pre>

  const readers = ["first", "second"].map(file =>
    fetch(`jsons/${file}.json`).then(res => res.json())
  );

  Promise.all(readers).then(jsons => {
    const data = Object.assign({}, ...jsons);
    $("#result").text(JSON.stringify(data, null, 4));
  });

• 動作確認用codesandbox: https://codesandbox.io/s/q258489-yiqmi

追記

JQuery を使うのでしたら、 fetch や Promise.all を使わず、$.getJSON と $.when を使ってもできます。

  const readers = ["first", "second"].map(file =>
    $.getJSON(`jsons/${file}.json`)
  );

  $.when(...readers).done((...args) => {
    const data = Object.assign({}, ...args.map(arg => arg[0]));
    $("#result").text(JSON.stringify(data, null, 4));
  });

• 動作確認用codesandbox: https://codesandbox.io/s/q258489-9eo3w

Comments

[Yasumichi]

勉強になります。

スマートですけど、ちょっと高度な気がしますね。

[jun68ykt]

@Yasumichiさん
コメントありがとうございます。
そうですね。JQuery を使うのでしたら、追記したように $.getJSON と $.when を利用するのが分かりやすいかもしれません。

[Yasumichi]

恥ずかしながら、スプレッド構文（...）というのを初めて知りました。勉強になります。

【JavaScript】スプレッド構文の便利な使い方まとめ - Qiita
https://qiita.com/Nossa/items/e6f503cbb95c8e6967f8

上記のリンクの精査はしてないですが。

[okomekei02]

ありがとうございます！少し難しいですが、とても参考になりました！

[jun68ykt]

@okomekei02さん
どういたしまして????
> とても参考になりました！
とのことでよかったです????

Answer 2

first = JSON.parse('{"nodes":[{"id":0,"label":"nodeA"},{"id":2,"label":"nodeC"},{"id":3,"label":"nodeD"},{"id":4,"label":"nodeE"},{"id":5,"label":"nodeF"}]}');

second = JSON.parse('{"liks":[{"source":0, "target":1},{"source":0, "target":2},{"source":1, "target":3},{"source":1, "target":3},{"source":2, "target":1},{"source":2, "target":3},{"source":3, "target":4},{"source":4, "target":5},{"source":5, "target":3}]}');

third = {};
third.nodes = first.nodes;
third.links = second.liks;

では、ダメでしょうか？肝となるのは下３行です。