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

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

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

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

JavaScript

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

Q&A

解決済

1回答

525閲覧

JSONファイルから読み込んだ値を表示の際に変えたい

Arthur11

総合スコア10

JSON

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

JavaScript

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

0グッド

0クリップ

投稿2022/12/28 05:39

前提

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を使っています
ファイルは全部同じフォルダ内にあるローカル環境で動作しています。

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

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

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

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

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

guest

回答1

0

ベストアンサー

読み取った変数を上書きすれば大丈夫ですよ
基本的にfsやjsonに値を保存する系のmoduleを使っていたりしない限り勝手にファイル内容が変わることはありませんので

たとえば10倍するのであれば

js

1const res1 = await fetch("nodes.json"); 2const jsondata1 = (await res1.json()).map(d => { 3 d.length *= 10; 4 return d; 5}); 6const nodes = new vis.DataSet(jsondata1);

といった形でいかがでしょう

投稿2022/12/28 06:01

kinji2532

総合スコア57

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

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

Arthur11

2022/12/28 06:58

上手く動作しました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問