質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

771閲覧

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

Arthur11

総合スコア10

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/12/21 09:28

前提

初めての質問なので拙い文章でしたら申し訳ございません
使用言語は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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

sample.json

json

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

js

javascript

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

投稿2022/12/21 09:58

yambejp

総合スコア115010

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Arthur11

2022/12/21 13:00

そちらのコードはすでに試していて 今回の場合だとうまく行かなくて困っています 今少し書いていてこのコードなんですが 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 } })();
guest

0

自己解決

自分で解決しました
改善した内容としては
・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 } })();

投稿2022/12/21 13:09

Arthur11

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問