CODEWITHSUNDEEP
javascriptjqueryhtmljsonajax
STOAM
STOAM

Reputation: 95

How to save variables to a JSON file?

I'm very new to JQuery, JS and JSON

I'm trying to just get a basic save file created using this code:

<script>
var myObj, myJSON, text, obj;

// Storing data:
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
$.setJSON("testJSON", myJSON);

// Retrieving data:
text = $.getJSON("testJSON.json");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

I'm pretty sure $.setJSON doesn't exist but I can't find what I use to set variables. Eventually I want to set up loops and save text from a textarea in a json file.

I know this isn't a great thing to set up and that I should probably set this up with php and sql. But this only going to be used by 2 users and it wont be simultaneously.

Any help would be great.

Upvotes: 2

Views: 1021

Answers (4)

Phil
Phil

Reputation: 164793

Here's what you can do regarding file operations.

Prompt the user for download

Create an anchor with the download attribute and a data-uri href for the JSON.

const data = { name: "John", age: 31, city: "New York" };
document.getElementById('download').addEventListener('click', () => {
  let dl = document.createElement('a')
  dl.download = 'test.json' // target filename
  dl.href = `data:application/json;charset=utf-8,${JSON.stringify(data)}`
  dl.click()
})
<button id="download" type="button">Save</button>

You may run into URI length problems with this depending on the size of your data but considering you can base64-encode a several MB image into a data-uri easily, I probably wouldn't worry.

Allow the user to upload a file

Listen for input or change events on an <input type="file"> and read the file data

document.getElementById('upload').addEventListener('input', e => {
  let file = e.currentTarget.files[0]
  let reader = new FileReader()
  reader.onload = e => {
    try {
      let obj = JSON.parse(e.target.result)
      
      // congrats, you now have an object from the file
      
      document.getElementById('out').textContent = JSON.stringify(obj, null, 2)
    } catch (err) {
      console.error('JSON parsing error', err.message)
    }
  }
  reader.onerror = e => {
    console.error('PANIC!', e)
  }
  reader.readAsText(file)
})
<dl>
<dt><label for="upload">Upload your <code>.json</code> file</label></dt>
<dd><input type="file" id="upload"></dd>
</dl>

<pre id="out"></pre>

There's a lot of error checking omitted from this answer so I suggest you read up on using the FileReader API for more details.

Upvotes: 3

Munkhdelger Tumenbayar
Munkhdelger Tumenbayar

Reputation: 1874

JS will not access computer except some others

You should (not should this is just another way to store your json since js cant access through folders anyway) store your json into localStorage.setItem(keytolaterretreive,yourJson)

You can later retreive it localStorage.getItem(keytolaterretreive) this will return your desired json

Example:

myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("myJson",myJSON);
retreivedJson = localStorage.getItem("myJson");
console.log(retreivedJson);<-- your json will be consoled

For more information about localStorage

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18575

You have to parse the .json text into JavaScript. JSON.parse(). Then you can get at the properties.

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

Upvotes: -1

John
John

Reputation: 1540

Javascript in the browser does not have API access to the underlying file system, so you will not be able to save a JSON file this way. The only thing you would be able to do is to aggregate the user data into a Form and Post the data to a server side API via AJAX.

This documentation should help you understand FormData and how to send it.

Upvotes: -1

Related Questions