How to amend JSON content using jQuery

Question

I'm building a drop down list using jQuery from some JSON, i'm taking the full data for this item and adding it to data-obj which i'm using later in a POST request. I'm needing to insert a piece of information into the data but cannot work out how to do it.

The data when i receive it from the server looks like this:

{
        "genreId": 1,
        "genre": "Horror",
        "genreGroup": "Fiction",
        "Publishers": [{
                "publisher": "Random House",
                "books": [{
                        "book": "The Shining",
                        "releaseyears": [2012, 2013, 2014]
                }]
        }, {
                "publisher": "Penguin",
                "books": [{
                        "book": "Dracula",
                        "releaseyears": [2010]
                }, {
                        "book": "Taking Lives",
                        "releaseyears": [2013, 2014]
                }]
        }]
}

I need to add a derived field 'Original Genre' into the data so it looks like:

{
        "genreId": 1,
        "genre": "Horror",
        "genreGroup": "Fiction",
        "Publishers": [{
                "publisher": "Random House",
                "originalgenre": "Horror",
                "books": [{
                        "book": "The Shining",
                        "releaseyears": [2012, 2013, 2014]
                }]
        }, {
                "publisher": "Penguin",
                "originalgenre": "Horror",
                "books": [{
                        "book": "Dracula",
                        "releaseyears": [2010]
                }, {
                        "book": "Taking Lives",
                        "releaseyears": [2013, 2014]
                }]
        }]
}

I think the relevant code is:

   $(info.genre).each(function (i) {
             var bookitem = $('<a/>', {
                     text: this.genre,
                     'data-value': this.genre,
                     'class': 'selectable',
                     'data-name': "G" + (this.genre),
                     'data-obj': JSON.stringify(this),
                     'data-target': 'booksection'
             });
             listGenres.append($("<li/>").append(bookitem));
[....do other things ...]

So it's when i add the data-obj element i get the data available (just as it is in the first code block, i need to do amend it before i build the list to add the extra field in.

Any ideas how i can achieve this?

I need to add a field at the same level as publisher. So i get the first block code from the server, i need to do something to it to add a field to it so it looks like the second block of code. — Hagbard
– Hagbard, Commented Jun 12, 2014 at 10:41

PeterKA · Accepted Answer · 2014-06-12 13:30:15Z

3

$.each(data.Publishers, function(i, v) {
    data.Publishers[i]['originalgenre'] = data.genre;
});

JS FIDDLE DEMO

edited Jun 12, 2014 at 13:30

answered Jun 12, 2014 at 10:57

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

2 Comments

Tomanow Over a year ago

Your variables do not match.. I !== i

PeterKA Over a year ago

You're right @Tomanow, thank you. That's the problem of writing from a phone. Corrected -- will be more careful now.

Tomanow · Accepted Answer · 2014-06-12 10:43:10Z

for (var i = 0; i < myJson.Publishers.length; i++) {
    myJson.Publishers[i].originalgenre = myJson.genre;
}

Where

var myJson = {
        "genreId": 1,
        "genre": "Horror",
        "genreGroup": "Fiction",
        "Publishers": [{
                "publisher": "Random House",
                "books": [{
                        "book": "The Shining",
                        "releaseyears": [2012, 2013, 2014]
                }]
        }, {
                "publisher": "Penguin",
                "books": [{
                        "book": "Dracula",
                        "releaseyears": [2010]
                }, {
                        "book": "Taking Lives",
                        "releaseyears": [2013, 2014]
                }]
        }]
};

Anthony Grist · Accepted Answer · 2014-06-12 10:45:05Z

2

I assume the "Original genre" in the Publishers array is supposed to match the "genre" in the main object? If that is the case, this should do it:

$.each(yourObject.Publishers, function(index, publisher) {
    publisher.originalgenre = yourObject.genre;
});

answered Jun 12, 2014 at 10:45

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Collectives™ on Stack Overflow

How to amend JSON content using jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related