Javascript를 사용하여 JSON 파일에 데이터를 쓰는 방법

Javascript를 사용하여 JSON 파일에 데이터를 쓰는 방법

를 들어, 저는 를어, 는 가 있습니다..JSON다음 파일이 있습니다.

[{"honda": "accord", "color": "red"},{"ford": "focus", "color": "black"}]

오브젝트를 입니까?{"nissan": "sentra", "color": "green"} 안에.json로 설정합니다..json줄서기 모양

[{"honda": "accord", "color": "red"},{"ford": "focus", "color": "black"},{"nissan": "sentra", "color": "green"}]

제가 질문하는 이유는 온라인에서 AJAX를 사용하여 .json 파일에서 데이터를 가져오는 방법에 대한 많은 정보를 찾고 있지만, 추가 데이터로 .json 파일을 업데이트하기 위해 AJAX를 사용하여 .json 파일에 새 데이터를 쓰는 방법은 없기 때문입니다.

어떤 도움이라도 주시면 감사하겠습니다!

'JSON'이 무슨 뜻인지 잘 알아야 돼요

JSON이라는 하여 JSON과 한 오래된 개체를 .[{a: 1}] 요소를 " " "만"만 있으면 됩니다.push와

var arr = [{a: 1}];
arr.push({b: 2});

< [{a: 1}, {b: 2}]

JSON이라는 단어는 JSON 형식으로 인코딩된 문자열을 나타낼 때도 사용할 수 있습니다.

var json = '[{"a": 1}]';

이것이 문자열임을 나타내는 따옴표(단일)에 주의해 주세요.가져온 객체를 하고 JavaScript를 사용해야 .JSON.parse:

var obj = JSON.parse(json);

을 할 수 push , JSON 을 사용합니다.JSON.stringify:

var new_json = JSON.stringify(obj.push({b: 2}));
'[{"a": 1}, {"b": 1}]'

또한 JSON은 데이터를 저장(지속)할 수 있는 서버 간에 데이터를 전송하기 위한 일반적인 포맷 방법으로도 사용됩니다. 는, 서버로부터 ), 그 양쪽 모두) 됩니다.Ajax 는, 서버로부터 데이터를 취득하기 위해서(종종 JSON 포맷으로), 또는 JSON 포맷으로 데이터를 서버에 송신하기 위해서 사용합니다.는, JSON 「Ajax」의 「Ajax」가 하게 되는 경우가 .JSON.parse상기와 같이 합니다.하여 JSON 수 있습니다.JSON.stringify다른 ajax 호출을 사용하여 데이터를 서버로 전송하여 저장 또는 기타 조작을 수행합니다.

JSON 파일이라는 용어를 사용합니다.일반적으로 "file"이라는 단어는 일부 장치의 물리적 파일(코드 또는 JavaScript 개체에서 다루는 문자열이 아님)을 나타낼 때 사용됩니다.브라우저는 시스템의 물리적 파일에 액세스할 수 없습니다.그것은 그것들을 읽거나 쓸 수 없다.실제로 브라우저에는 파일이라는 개념조차 없습니다.따라서 로컬머신에서는 일부 JSON 파일을 읽거나 쓸 수 없습니다.서버와의 사이에 JSON을 송수신 하는 경우는, 물론 서버가 파일로서 JSON을 보존하고 있을 가능성이 있습니다만, 서버는, 데이타베이스로부터 취득한 데이터에 근거해 JSON을 구축하거나, 데이타베이스로부터 취득한 데이터에 근거해 관련 데이터를 데이타베이스에 격납하거나 하는 경우가 많습니다.

정말로 「JSON 파일」을 가지고 있습니까?만약 있다면, 그 파일은 어디에 존재하며, 어디서 얻은 것입니까?해석, 메인 입력 및 새로운 JSON 형식의 문자열로 되돌리기 위해 필요한 JSON 형식의 문자열이 있습니까?서버에서 JSON을 가져와 수정한 후 서버로 반송해야 합니까?아니면 "JSON 파일"은 실제로 일반적인 JavaScript 로직으로 조작해야 하는 JavaScript 객체일 뿐입니까?

JSON.stringify를 사용하여 JSON을 로컬 스토리지에 쓸 수 있습니다.JS만 사용하여 JSON 파일에 쓸 수 없습니다.쿠키 또는 로컬 저장소만

    var obj = {"nissan": "sentra", "color": "green"};

localStorage.setItem('myStorage', JSON.stringify(obj));

그리고 나중에 개체를 검색하려면

var obj = JSON.parse(localStorage.getItem('myStorage'));

안타깝게도 오늘(2018년 9월) 클라이언트 측 파일 쓰기를 위한 크로스 브라우저 솔루션을 찾을 수 없습니다.

예를 들어 Chrome과 같은 일부 브라우저에서는 현재 이러한 가능성이 있으며 클라이언트 측 호출로 FileSystemFileEntry.createWriter()를 사용하여 쓸 수 있지만 문서에 따르면 다음과 같습니다.

이 기능은 폐지되었습니다.일부 브라우저에서는 여전히 작동하지만 언제든지 제거될 수 있으므로 사용을 권장하지 않습니다.그것을 사용하지 않도록 하세요.

---

IE(MS Edge) ActiveX는 ActiveX를 사용합니다.

JSON 파일 크로스 브라우저를 업데이트하려면 서버와 클라이언트 측을 함께 사용해야 합니다.

클라이언트 측 스크립트

클라이언트 측에서는 서버에 요청을 한 후 서버에서 응답을 읽어야 합니다.또는 FileReader로 파일을 읽을 수도 있습니다.크로스 브라우저가 파일에 쓰려면 서버가 있어야 합니다(아래 서버 부분 참조).

var xhr = new XMLHttpRequest(),
    jsonArr,
    method = "GET",
    jsonRequestURL = "SOME_PATH/jsonFile/";

xhr.open(method, jsonRequestURL, true);
xhr.onreadystatechange = function()
{
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        // we convert your JSON into JavaScript object
        jsonArr = JSON.parse(xhr.responseText);

        // we add new value:
        jsonArr.push({"nissan": "sentra", "color": "green"});

        // we send with new request the updated JSON file to the server:
        xhr.open("POST", jsonRequestURL, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // if you want to handle the POST response write (in this case you do not need it):
        // xhr.onreadystatechange = function(){ /* handle POST response */ };
        xhr.send("jsonTxt="+JSON.stringify(jsonArr));
        // but on this place you have to have a server for write updated JSON to the file
    }
};
xhr.send(null);

서버측 스크립트

다양한 서버를 사용할 수 있지만 PHP와 Node.js 서버에 대해 쓰고 싶습니다.

검색 머신을 사용하면 "free PHP Web Hosting*" 또는 "free Node.js Web Hosting"을 찾을 수 있습니다.PHP 서버의 경우 000webhost.com, Node.js의 경우 이 목록을 보고 읽는 것을 권장합니다.

PHP 서버 측 스크립트 솔루션

JSON 파일을 읽고 쓰기 위한 PHP 스크립트:

<?php

// This PHP script must be in "SOME_PATH/jsonFile/index.php"

$file = 'jsonFile.txt';

if($_SERVER['REQUEST_METHOD'] === 'POST')
// or if(!empty($_POST))
{
    file_put_contents($file, $_POST["jsonTxt"]);
    //may be some error handeling if you want
}
else if($_SERVER['REQUEST_METHOD'] === 'GET')
// or else if(!empty($_GET))
{
    echo file_get_contents($file);
    //may be some error handeling if you want
}
?>

---

Node.js 서버측 스크립트 솔루션

Node.js는 초심자에게는 조금 복잡한 것 같습니다.이것은 브라우저와 같은 일반적인 JavaScript가 아닙니다.Node.js를 시작하기 전에 다음 두 권의 책을 읽는 것이 좋습니다.

• 학습 노드:서버측으로의 이행
• Node.js 웹 개발:서버측 개발

JSON 파일을 읽고 쓰기 위한 Node.js 스크립트:

var http = require("http"),
    fs = require("fs"),
    port = 8080,
    pathToJSONFile = '/SOME_PATH/jsonFile.txt';

http.createServer(function(request, response)
{
    if(request.method == 'GET')
    {
        response.writeHead(200, {"Content-Type": "application/json"});
        response.write(fs.readFile(pathToJSONFile, 'utf8'));
        response.end();
    }
    else if(request.method == 'POST')
    {
        var body = [];

        request.on('data', function(chunk)
        {
            body.push(chunk);
        });

        request.on('end', function()
        {
            body = Buffer.concat(body).toString();
            var myJSONdata = body.split("=")[1];
            fs.writeFileSync(pathToJSONFile, myJSONdata); //default: 'utf8'
        });
    }
}).listen(port);

Node.js 관련 링크:

• 순수 Node.js(HTTP GET 및 POST, HTTP 서버)를 사용한 웹 애플리케이션 개발 방법(상세 비디오 튜토리얼)
• HTTP 트랜잭션의 구조
• Node.js에서의 POST 요구 처리 방법
• Node.js에서 POST 데이터를 추출하려면 어떻게 해야 합니까?

언급URL : https://stackoverflow.com/questions/32546100/how-to-write-data-to-a-json-file-using-javascript