current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I've been developing for many years but this is my first time working with JSON and Javascript objects in any real depth so please bare with me. Here is my dilemma:

I wish to add wishlist functionality to a client site using a combination of Javascript and cookies. To achieve this, each item on the site will have a button that the user can click to add the item to their wishlist. The button code is as follows:

<a data-id="5054" data-node="3286" data-type="package" class="wishList">Add to Wishlist</a>

When the button is clicked the following JavaScript is executed:

$('.wishList').click(function () {
    var nodeId = $(this).data("node");
    var id = $(this).data("id");
    var type = $(this).data("type");

    var package = new Object();
    package.id = id;
    package.nodeId = nodeId;

    var jsonObject = new Object();    
    jsonObject.package = package;


    var jsonString = JSON.stringify(jsonObject);
    console.log(jsonString);

    var newObject = new Object();
    newObject.id = 8888;
    newObject.nodeId = 7777;

    var obj = JSON.parse(jsonString);
    obj['package'].push(newObject);
    console.log(JSON.stringify(obj));
});

This code is derived from this Stack Overflow question and my own knowledge:

Adding a new array element to a JSON object

The aim of the code is to simulate both creating a new JSON notation using Javascript objects as well as parsing the notation back into a Javascript object, adding a new item to the array and then using stringify to convert it back into a string again. My problem is, the push method does not seem to work. When I run this code, I get the following error:

TypeError: obj.package.push is not a function

As this part of the code was taken from the other question, I am at a loss to understand why it is not working in this context as I do not see any comments suggesting that this does not work on the other post.

My aim is to build up the following JSON notation:

{"package":[{"id":"5054","nodeId":"3286"},{"id":"8888","nodeId":"7777"}]}

This will eventually lead to a more complex notation of:

{"package":[{"id":"5054","nodeId":"3286"},{"id":"8888","nodeId":"7777"}], "hotel":[{"id":"3421","nodeId":"1234"},{"id":"8748","nodeId":"2435"}],}

This notation will then be stored as a cookie that will be added to and manipulated using JavaScript and read on the server side with each request using .Net.

My question is, what am I doing wrong here? Why in this case is the .push funcionality not working?

Any help would be greatly appreciated.

I've created a Fiddle here : http://jsfiddle.net/jezzipin/kdVVK/

share|improve this question
    
new Object() → {} –  minitech♦ Jun 26 at 23:05
    
var obj = JSON.parse(jsonString); This does not mean obj is now an array. '.push' only pushes on JS arrays. What console.log tells you about 'obj'? In case 'obj' is an object, it's more like: obj.package = {}; obj.package = newObject; –  Bonatoc Jun 26 at 23:06
    
@Bonatoc obj.package.push is not a function. Could you elaborate? It's late here and I don't quite follow. –  jezzipin Jun 26 at 23:09
    
You can't use 'push' on objects. 'push' is for arrays. What does 'console.log(obj);' show in Chrome Dev Tools (or FF Firebug, whatever you use as a console)? –  Bonatoc Jun 26 at 23:12
    
Then how come it was used in the other answer? I see no difference in the methodology I am using. I merely wish to add another set of records to an existing JSON notation. Using obj.package = {}; obj.package = newObject; overwrites the previous record. –  jezzipin Jun 26 at 23:16

1 Answer 1

up vote 2 down vote accepted

As your package property will be a simple list of objects, it needs to be an array.

$('.wishList').click(function () {
    var nodeId = $(this).data("node");
    var id = $(this).data("id");
    var type = $(this).data("type");

    var package = [];

    package.push({
        id: id,
        nodeId: nodeId
    });

    var jsonObject = {};    
    jsonObject.package = package;


    var jsonString = JSON.stringify(jsonObject);
    console.log(jsonString);

    var newObject = {
        id: 8888,
        nodeId: 7777
    };

    var obj = JSON.parse(jsonString);
    obj['package'].push(newObject);
    console.log(JSON.stringify(obj));
});

updated fiddle

share|improve this answer
    
@jezzipin — My point exactly (going to delete my answer). You can add objects to arrays, and vice-versa. You just need to be careful in your construction and declare your "containers" types ("object" or "array") properly from the start. –  Bonatoc Jun 26 at 23:25
    
@dc5 You sir are a gentleman and a scholar thanks a lot for this :-) –  jezzipin Jun 26 at 23:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.