JavaScript push to array object is not working

Question

I have an html like below

HTML:

 <INPUT TYPE=CHECKBOX NAME="clcik" onClick="add('1234','blah')" />
 <input type="hidden" id="project" value="" />

JS:

    function add(obj1 , obj2){
    var jsonArray = [];
    var jsonObj = { product_id : obj1 , name : obj2 };
    jsonArray.push(jsonObj);
    var field = document.getElementById('project');
    field.setAttribute('value', JSON.stringify(jsonArray));
    alert(field.getAttribute('value'));
    }

I am trying to set first and retrieve again to check but nothing is happening..I can't understand where I am wrong...?

@jfriend00, I'm sure that's it. Write up an answer with var stringData = JSON.stringify(jsonArray) replaced. — hayesgm
– hayesgm, Commented Aug 17, 2011 at 18:41
This is not jQuery related - i've removed the tag and updated the title. — Stephen
– Stephen, Commented Aug 17, 2011 at 18:43
Your question are all about one and the same problem. You won't get far if you are trying to solve the problem step by step by asking questions here (and questions about solutions you get here). I really recommend you to take a step back and read about JavaScript, DOM, HTML etc so that you have a basic understanding of it and can use it. — Felix Kling
– Felix Kling, Commented Aug 17, 2011 at 20:00

ShankarSangoli · Accepted Answer · 2011-08-17 20:16:19Z

3

I guess you missed to get the stringify result into stringData variable because of which you are getting a js error before it reaches the line where you are trying to alert the value.

JSON or JSON.stringify is not provided by jQuery you have to include json2 library on the page if the browser natively do not support it.

Try this

function add(obj1 , obj2){
    var jsonArray = [];
    var jsonObj = { product_id : obj1 , name : obj2 };

    jsonArray.push(jsonObj);
    var stringData = JSON.stringify(jsonArray);

    var field = document.getElementById('project');

    field.setAttribute('value', stringData);
    alert(field.getAttribute('value'));
}

Code to remove element from array based on your request in the comment.

var newArray = [], productIdToRemove = "1234";
$.each(jsonArray, function(){
   if(this.product_id != productIdToRemove){
      newArray.push(this);
   }
});

//Now newArray will not have '1234'

edited Aug 17, 2011 at 20:16

answered Aug 17, 2011 at 18:40

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

10 Comments

ShankarSangoli Over a year ago

JSON or JSON.stringify is not provided by jQuery you have to include json2 library on the page.

Matt Ball Over a year ago

@Shankar most browsers will actually include JSON natively. stackoverflow.com/questions/891299/…

ShankarSangoli Over a year ago

I think < IE8 do not have it natively

ShankarSangoli Over a year ago

@User - You had a js error in your fiddle, take a look at this fiddle it works fine jsfiddle.net/qWCwa/8

ShankarSangoli Over a year ago

You were not checking for empty value for the first time. Try this fiddle I fixed it jsfiddle.net/qWCwa/16

|

Matt Ball · Accepted Answer · 2011-08-17 18:47:28Z

1

Change

JSON.stringify(jsonArray)
// to
var stringData = JSON.stringify(jsonArray);

Other problems with the fiddle, fixed: http://jsfiddle.net/mattball/qWCwa/7/

edited Aug 17, 2011 at 18:47

answered Aug 17, 2011 at 18:41

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

1 Comment

Matt Ball Over a year ago

Open your browser's console and you will have a world of useful information at your fingertips. Namely: Uncaught SyntaxError: Unexpected token ; because there is an extra semicolon in the setAttribute() method call.

FishBasketGordo · Accepted Answer · 2011-08-17 18:41:21Z

0

In your example, you never set stringData.

answered Aug 17, 2011 at 18:41

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Comments

Stephen · Accepted Answer · 2011-08-17 18:41:52Z

0

get/set the "value" property directly on the input, not getAttribute and setAttribute methods.

answered Aug 17, 2011 at 18:41

Stephen

19k4 gold badges35 silver badges33 bronze badges

Comments

TessellatingHeckler · Accepted Answer · 2015-06-21 21:00:27Z

0

After changing the code to assign stringData, it seems to work for me:

function add(obj1 , obj2){
    var jsonArray = [];
    var jsonObj = { product_id : obj1 , name : obj2 };
    jsonArray.push(jsonObj);
    var stringData = JSON.stringify(jsonArray)
    var field = document.getElementById('project');
    field.setAttribute('value', stringData);
    alert(field.getAttribute('value'));
    }

add(1, 2);

You can see it working here: http://jsfiddle.net/jfriend00/HNuak/.

FYI, if you just run in an environment where you can see javascript execution errors (like the Chrome or Firefox debuggers), errors like this would be easy to see in the error console.

edited Jun 21, 2015 at 21:00

TessellatingHeckler

29.3k4 gold badges55 silver badges96 bronze badges

answered Aug 17, 2011 at 18:42

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

1 Comment

jfriend00 Over a year ago

Your jsFiddle settings were such that the add() function definition was not in the global scope so the checkbox code couldn't find it. I changed the jsFiddle settings and now it works here: jsfiddle.net/jfriend00/YL8eU. Once again, you just need to use a JS debugger so you can see the JS errors and you would know how to see the cause of these issues in seconds.

Collectives™ on Stack Overflow

JavaScript push to array object is not working

5 Answers 5

10 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related