Use javascript to update a json file

Question

I'd like to preface this by saying I know what I'm doing isn't ideal. With that covered:

I need to update data in a JSON file via javascript. Here is the JSON file as it currently stands:

{
"nextid" : 3,
"ingredients" : [
{
    "id": 1,
    "name": "onion",
    "kilojoules": 180,
    "quantity": 1,
    "measurement": "whole",
    "nutrition": [
        {"value": "Fat Total", "quantity": 110},
        {"value": "Saturated Fat", "quantity": 46},
        {"value": "Sodium", "quantity": 4},
        {"value": "Carbohydrates Total", "quantity": 10000},
        {"value": "Sugar", "quantity": 5000},
        {"value": "Fibre", "quantity": 2000},
        {"value": "Proten", "quantity": 1000}
    ]},

{
    "id" : 2,
    "name": "carrot",
    "kilojoules": 56,
    "quantity": 1,
    "measurement": "whole",
    "nutrition": [
        {"value": "Fat Total", "quantity": 66},
        {"value": "Saturated Fat", "quantity": 11},
        {"value": "Sodium", "quantity": 26},
        {"value": "Carbohydrates Total", "quantity": 3000},
        {"value": "Sugar", "quantity": 2000},
        {"value": "Fibre", "quantity": 1000},
        {"value": "Proten", "quantity": 279}
    ]}
]

}

Now let's say I want to edit the carrot object. I've built an updated carrot object on my html page and have it sitting as an object in the javascript. What am I going to need to do to update the source json with my edits?

Like I said before, I know this isn't ideal. I should have used a database for storing and manipulating data, but I've made my bed now and I have to get this working, regardless of how much it might make you all cringe.

Research tells me I'm going to need to use PHP or ASP on the server side to collect the parameters the javascript passes to it, but I have no idea where to begin with that.

I'm working in visual studio 2012 and the parameters of the project prohibit me from using addons. NuGet code libraries yes, but no addons. On that basis, I think it means I can't use PHP. Am I correct in my thinking there?

Note: Yes it's for an assignment, but altering the json file is beyond the scope of the requirements. Being able to process json data dynamically is enough for the project, I'd just REALLY like to be able to put some back.

Thanks in advance

EDIT: Probably should have shared this too. This is the javascript that opens the json file. The result of the opening is stored in a script wide variable called ingJson.

function downloadIngredients() {
$(document).ready(function () {
    $.getJSON("/data/ingredientsInfo.js", function (result) {
        try
        {
            ingJson = result;
            ingredients = result.ingredients;
            ingredients.sort(orderByNameAscending);
            buildListBox(ingredients);
        }
        catch (err) {
            alert(err.message);
        }
    });
});
}

So, the JSON file is actually saved as a actual text file? In that case: Open it with php, send the contents to the browser, parse the JSON with JavaScript, edit the object, convert it to a JSON string again, send it back to php, and have php overwrite the file. It's a shame you can't just edit the file directly in php. Have a look at JavaScript's JSON functionality. — Cerbrus
– Cerbrus, Commented Jan 31, 2014 at 10:38
Agree with @Cerbrus: basically what you need to do is load the JSON on the browser, parse it in JS, change it the way you want, stringify it - see JSON.stringify( obj ) - and then POST it back to the server. No matter which technology you are using server side because it has only to read the POST and write it on the JSON file. — MarcoL
– MarcoL, Commented Jan 31, 2014 at 10:42
That's the thing though. I don't know what I'm doing on the server side. This is really my first big foray into web development (I usually do C# interface work for GIS systems). I guess what I'm asking is HOW do I do that on the server. Sorry for my ignorance on this. — DrBoon
– DrBoon, Commented Jan 31, 2014 at 10:45

Cerbrus · Accepted Answer · 2014-01-31 10:58:21Z

3

To edit a JSON file:

Open the file with php
Send the contents to the browser _{(Just dump it as string in a variable in a script tag)}
Parse the JSON with JavaScript (onload -> get the string from the script tag)
Edit the object
Convert it to a JSON string again
Send it back to php
Have php overwrite the file.

It's a shame you can't just edit the file directly in php, that'd render steps 2-6 unnecessary, you'd just parse, edit, and encode the JSON in php.

Edit: Since you seem to have the data in JavaScript already, steps 1-3 are accounted for.

edited Jan 31, 2014 at 10:58

answered Jan 31, 2014 at 10:46

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DrBoon Over a year ago

Thanks for that. Are there any tricks I should know about including php in my project? Or is calling the script enough? I'm using IIS express built into VS in lieu of an actual server.

Cerbrus Over a year ago

I'd just use jQuery's post() to call the script, yea. The script'll then get the JSON string from the post parameters, and save it to the file: $.post( "url/saveJSON.php", succes_handler); (Where the succes_handler function is optional)

Collectives™ on Stack Overflow

Use javascript to update a json file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related