Q&A
前提
Javascriptでリアルタイムに更新が入るシステムを作っています。
その際にJSONファイルから読み込んだ値を変更させる方法が分かりません。
実現したいこと
JSONファイルからキー内の値を一律に変更し、表示させたい
該当のソースコード
JavaScript
1<body> 2 <div id="network"></div> 3 4 <script type="text/javascript"> 5 (async() =>{ 6 try{ 7 const res1 = await fetch("nodes.json"); 8 const jsondata1 = await res1.json(); 9 const nodes = new vis.DataSet(jsondata1); 10 11 const res2 = await fetch("edges.json"); 12 const jsondata2 = await res2.json(); 13 const edges = new vis.DataSet(jsondata2); 14 console.log(edges,nodes) 15 const container = document.getElementById('network'); 16 17 const data = { 18 nodes: nodes, 19 edges: edges 20 }; 21 const options = { 22 nodes:{ 23 shadow:{ 24 enabled: true, 25 color: 'rgba(0,0,0,0.5)', 26 size:3, 27 x:1, 28 y:1 29 } 30 }, 31 edges:{ 32 color: { 33 color:'#6495ed', 34 highlight:'#fa8072', 35 }, 36 shadow:{ 37 enabled: true, 38 color: 'rgba(0,0,0,0.5)', 39 size:3, 40 x:1, 41 y:1 42 }, 43 selectionWidth: function (width) {return width*3;}, 44 width: 2, 45 } 46 } 47 48 const network = new vis.Network(container, data, options); 49 50 network.on("oncontext", function(params) { 51 if (params.nodes.length == 1) { 52 const nodeId = params.nodes[0]; 53 const node = nodes.get(nodeId); 54 location.assign(node.image); 55 } 56 }); 57 58 network.on("click", function(params) { 59 if (params.nodes.length == 1) { 60 const nodeId = params.nodes[0]; 61 const node = nodes.get(nodeId); 62 } 63 }); 64 65 network.setOptions(options); 66 67 }catch (err){ 68 console.log(err); 69 return 70 } 71 })(); 72 </script> 73 </body> 74 75#JSONファイルの内容(ここのlenghtの値を表示の際に毎回変更したい) 76例:表示の時だけ、lenght:50 → lenght:500にしたい JSONファイルの内容を変更するのは避けたい 77[ 78 { 79 "from": 1, 80 "to": 3, 81 "lenght": 50 82 }, 83 { 84 "from": 2, 85 "to": 1, 86 "length": 30 87 }, 88 { 89 "from": 3, 90 "to": 4, 91 "lenght": 100 92 }, 93 { 94 "from": 5, 95 "to": 4, 96 "length": 1 97 } 98]
補足情報(FW/ツールのバージョンなど)
Javascriptのライブラリはvis.jsを使っています
ファイルは全部同じフォルダ内にあるローカル環境で動作しています。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/12/28 06:58