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 :)

Webbanditten · Accepted Answer · 2017-03-20 11:41:10Z

0

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.

answered Mar 20, 2017 at 11:41

Webbanditten

8809 silver badges22 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:34:57Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Mar 20, 2017 at 11:42

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:29:57Z

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, 2017 at 10:29

CommunityBot

11 silver badge

answered Mar 20, 2017 at 11:43

Elie Nassif

4624 silver badges11 bronze badges

Comments

bluehipy · Accepted Answer · 2017-03-20 11:46:46Z

0

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);
    });
});

answered Mar 20, 2017 at 11:46

bluehipy

2,2941 gold badge15 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related