How to add object to external JSON file with a button-click?

Question

Goodday fellow programmer,

I'm having trouble adding an object to my JSON file. I'm using jQuery. My javascript file:

$('#addchallenge').click(function()
{
    //hardcoded challenge
    var addchallenge =
    {
        "achievementname": "I am an achievement who want to be added to the list",
        "points": "50",
        "comment": "guess who has been a nasty achievement to add"
    }

    $.getJSON("../json/package.json", function (data)
    {
        $.each(data.allachievements, function ()
        {
            //very suspicious line here:
            this["achievementlist"].push(addchallenge);
        });
    });
});

My external JSON file:

{
"allachievements":[
    {
      "name": "list of all achievements",
      "achievementlist": [
        {
          "achievementname": "first achievement",
          "points": "30",
          "comment": "the first achievement to achieve"
        },
        {
          "achievementname": "second achievement",
          "points": "-90",
          "comment": "is worth a negative amout of points"
        },
        {
          "achievementname": "aaand the 3th achievement",
          "points": "30",
          "comment": "do you already have achievement 1 and 2?"
        }]
    }]
}

How could the addchallenge data be added into my JSON file?

Do I need to parse my JSON data, add my challenge to add, then stringify it back?

Thanks in advance :)

score 0 · Answer 1 · answered Mar 20 '17 at 11:41

You cant directly manipulate the JSON file - Writing, deleting etc.

However, you could write some backend code thats capable of this.

If you simply want to temporally add an achievement, you can parse in your JSON file into a variable and then manipulate it.

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

You can't modify the JSON file only with client side code. You need some server side code.

I would recommend you to use post().

EDIT: I actually found this: How to : edit an external json file in javascript

So, current post may be considered a duplicate...

edited May 23 '17 at 12:34

Community

1
1

answered Mar 20 '17 at 11:42

SrAxi

19,787
11
46
65

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

Are you trying to write into a file using jquery?
if so please check the following url:
Read/write to file using jQuery

edited May 23 '17 at 10:29

Community

1
1

answered Mar 20 '17 at 11:43

Elie Nassif

464
4
11

score 0 · Answer 4 · answered Mar 20 '17 at 11:46

Your problem is this, the context. Inside of the callback you are passing to $.each iterator, this is not what you think it is.

jQuery.each( array, callback )

callback

Type: Function( String propertyName, Object valueOfProperty ) The function that will be executed on every object.

I would change your code like this:

$.getJSON("../json/package.json", function (data)
{
    $.each(data.allachievements, function (key, value)
    {
        value["achievementlist"] = value["achievementlist"] || [];
        value["achievementlist"].push(addchallenge);
    });
});

How to add object to external JSON file with a button-click?

4 Answers4