javascriptでのデータ配列を外部ファイルから読み込みたい

Question

前提

初めての質問なので拙い文章でしたら申し訳ございません
使用言語はJava scriptです。
ローカル環境で行っています。

実現したいこと

ソーシャルグラフを書いていてノードとノードをつなぐ線の配列を外部ファイルから呼び出す形にしたいです。
（理由：Pythonでノードを追加する処理をしたいため）
外部ファイルは同じフォルダ内に追加します。ファイル形式はなんでも大丈夫です。

発生している問題・エラーメッセージ

外部ファイルのデータは取れるがその後の処理がうまく行かない

該当のソースコード

JavaScript

  var nodes = new vis.DataSet([
    {id: 1, shape: 'image', image: ''},
    {id: 2, shape: 'image', image: ''},
    {id: 3, shape: 'image', image: ''},
    {id: 4, shape: 'image', image: ''},
    {id: 5, shape: 'image', image: ''},
    {id: 6, shape: 'image', image: ''},　//ここの配列を外部ファイルから読み込みたい
  ]);
  
  var edges = new vis.DataSet([
    {from: 1, to: 2, lenght: 50},
    {from: 2, to: 1, length: 50},
    {from: 3, to: 4, lenght: 50},
    {from: 5, to: 3, length: 50},　//ここの配列を外部ファイルから読み込みたい
  ]);

  var container = document.getElementById('network');
  var data = {
    nodes: nodes,
    edges: edges //ここがうまく行かない
  };

試したこと

ネットで調べてfetch/then awaitなどは行いましたがオブジェクトが未定義などのエラーがでました

補足情報（FW/ツールのバージョンなど）

ライブラリはvis.js
開発環境はVScode

Answer 1

同じサイトからのデータ取り出しならjsonが妥当

sample.json

[
    {"id": 1, "shape": "image", "image": ""},
    {"id": 2, "shape": "image", "image": ""},
    {"id": 3, "shape": "image", "image": ""},
    {"id": 4, "shape": "image", "image": ""},
    {"id": 5, "shape": "image", "image": ""},
    {"id": 6, "shape": "image", "image": ""}
  ]

js

fetch("sample.json").then(res=>res.json()).then(console.log);

Comments

[Arthur11]

そちらのコードはすでに試していて
今回の場合だとうまく行かなくて困っています
今少し書いていてこのコードなんですが
edgesとnodesはデータがあるんですけどその後の受け渡しで未定義になるみたいなんです。
(async() =>{
try{
const res1 = await fetch("./nodes.json");
const jsondata1 = await res1.json();
const nodes = new vis.DataSet(jsondata1);

const res2 = await fetch("./edges.json");
const jsondata2 = await res2.json();
const edges = new vis.DataSet(jsondata2);
console.log(edges,nodes)
const container = document.getElementById('network');

const data = {};
Object.assign(data.nodes, nodes);
Object.assign(data.edges, edges);

const options = {};
const network = new vis.Network(container, data, options);
console.log(data)
network.on("oncontext", function(params) {
if (params.nodes.length == 1) {
const nodeId = params.nodes[0];
const node = nodes.get(nodeId);
location.replace(node.image);
}
});
}catch (err){
console.log(err);
return
}
})();

Answer 2

自分で解決しました
改善した内容としては
・promiseの非同期接続を辞めた→thenではなくawait/asyncを利用した
JavaScript

 (async() =>{
   try{
      const res1 = await fetch("./nodes.json");
      const jsondata1 = await res1.json();
      const nodes = new vis.DataSet(jsondata1);

      const res2 = await fetch("./edges.json");
      const jsondata2 = await res2.json();
      const edges = new vis.DataSet(jsondata2);
      console.log(edges,nodes)
      const container = document.getElementById('network');

      const data = {
        nodes: nodes,
        edges: edges
      };
      
      const options = {};
      const network = new vis.Network(container, data, options);
      console.log(data)
      network.on("oncontext", function(params) {
        if (params.nodes.length == 1) {
          const nodeId = params.nodes[0];
          const node = nodes.get(nodeId);
          location.replace(node.image);
        }
      });
    }catch (err){
      console.log(err);
      return
    }  
  })();