ローカルで実行されているHtmlページを介してマシン上のJsonファイルを更新する

Question

unknownという配列にデータを整理するには、それぞれのメンバーをgoodという配列またはbadという配列に移動します。

let data = { 
    "bad":[], 
    "unknown": ["b", "a", "d", "g", "o", "o", "d"], 
    "good": [] 
}; 

は次のようになります。私は私がこれを行う助けるために少しのhtml/javascriptのツールを書かれている

data = { 
    "bad":["b", "a", "d"], 
    "unknown": [], 
    "good": ["g", "o", "o", "d"] 
}; 

、次のように：

http://jsfiddle.net/barra/121v4ow8/193/show/

私は実際に上記のコードを実行しています私のローカルマシンで、私はChromeのファイルを開くダイアログを使ってアクセスしています。

ローカルコンピュータのファイルにdataオブジェクトを読み書きしたいと考えています。たとえば、htmlページが読み込まれると、データを読み込みたいと思います。同様に私は望むように更新されたデータを保存したい。これを行うための最も単純で最も単純な方法は何ですか？このツールはどの段階でもオンラインではホストされないため、私は自分のマシンでのみローカルで使用します。

この単純な解決策（ファイルサーバーなど）の一部としてPythonまたはノードを使用できる場合は、そのようなアプローチにも興味があります。

Answer 1

ブラウザ（クライアントコード）からファイルに書き込むことはできません。

Webページがこれを行う方法は、サーバーを使用する方法です。サーバーはJS（ノード）PHPまたはASPで実行できるコードを実行し、そのサーバーコードは通常はDBに格納し、フェッチする機能と格納する機能の2つを持っています。これらのエンドポイントを呼び出します。

クライアントはAJAXを使用してサーバを呼び出し、JSON（あなたの配列はオブジェクトに格納されます）を要求し、通常は送信ボタンから書き戻します。

サーバを持っている場合は、どのようなコードでもコードを伝えることができるサーバーがあるかどうかを教えてください。

あなたがクライアント上でのjQueryを使用している場合は、

https://www.w3schools.com/jquery/jquery_ajax_get_post.asp

GETを取得し、POSTメソッドAJAXを使用することができます。データをフェッチすることです POST：セット（保存）データ

Answer 2

この場合、js/angularjsのようなクライアント側の言語は役に立ちません。代わりに、これを実現するためにノードを使用することができます。例えば。

• 以下のようなnodeサーバーを使用してhtmlファイル（例えばindex.html）を添えます。 （これはあなたのapp.jsファイルになります）

  var express = require("express"); 
  var bodyParser = require("body-parser"); 
  var app = express(); 
  var fs = require('fs'); 
  var fileName = './file.json'; 
  var file = require(fileName); 
  app.use(bodyParser.urlencoded({ 
  extended: false 
  })); 
  
  app.get('/', function (req, res) { 
  res.sendFile(__dirname + '/index.html'); 
  }); 
  app.get('/getJsonFile', function (req, res) { 
  res.sendFile(file); 
  }); 
  
  app.post('/saveToFile', function (req, res) { 
  file.object = req.body.data; 
      fs.writeFile(fileName, JSON.stringify(file), function (err) { 
      if (err) return console.log(err); 
      console.log(JSON.stringify(file)); 
      console.log('writing to ' + fileName); 
      }); 
      }); 
  
  
  app.listen(80, function() { 
  console.log("Started on PORT 80"); 
  }); 
  

今お使いのブラウザでlocalhost:3000を打つことはブラウザでhtmlをレンダリングします。

いいえ、jsonでfileのことをする時間です。

私はからhttp get/postリクエストを行う方法を知っていることを前提としています。

さて、クライアント側からのルートに

$.post("/saveToFile", {data: yourJson}, function (data) { 
alert(data); 
}); 

のようなものをPOSTリクエストを送信し、あなたは、単に/getJsonFile

横糸にあなたのクライアントからのGETリクエストを送信することができ、ファイルを取得します。希望がこれを助ける:)