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, Aug 17 '11 at 18:41
This is not jQuery related - i've removed the tag and updated the title. — Stephen, Aug 17 '11 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, Aug 17 '11 at 20:00

ShankarSangoli · Accepted Answer · 2011-08-17T20:16:19.930

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 '11 at 20:16

answered Aug 17 '11 at 18:40

ShankarSangoli

69,612
13
93
124

`JSON` or `JSON.stringify` is not provided by `jQuery` you have to include json2 library on the page. – ShankarSangoli Aug 17 '11 at 18:44
@Shankar most browsers will actually include JSON natively. http://stackoverflow.com/questions/891299/browser-native-json-support-window-json/891306#891306 – Matt Ball Aug 17 '11 at 18:56
I think < IE8 do not have it natively – ShankarSangoli Aug 17 '11 at 18:57
@User - You had a js error in your fiddle, take a look at this fiddle it works fine http://jsfiddle.net/qWCwa/8/ – ShankarSangoli Aug 17 '11 at 19:02
You were not checking for empty value for the first time. Try this fiddle I fixed it http://jsfiddle.net/qWCwa/16/ – ShankarSangoli Aug 17 '11 at 19:30
i want something like when during push I want to check if something with same product_id is already present then don't push. Else push it. – user882196 Aug 17 '11 at 19:44
well one last request what should i do if i want some product id to be deleted from the hidden field value. – user882196 Aug 17 '11 at 19:54
Loop through the array and keep pushing the elements which do not match product id into a new array, at the end of the loop you will have a new array which do not have the matching product id. – ShankarSangoli Aug 17 '11 at 20:05
if you are satisfied with my answer please mark it as an answer, thanks. – ShankarSangoli Aug 17 '11 at 20:05
well how can i delete {"product_id":"1234","name":"blah"} from this [{"product_id":"1234","name":"blah"},{"product_id":"1235","name":"blah"}] so as to get the resulting value as [{"product_id":"1235","name":"blah"}],,, – user882196 Aug 17 '11 at 20:11

Matt Ball · Answer 2 · 2011-08-17T18:47:28.833

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 '11 at 18:47

answered Aug 17 '11 at 18:41

Matt Ball

354,903
100
647
710

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. – Matt Ball Aug 17 '11 at 18:45

score 0 · Answer 3 · answered Aug 17 '11 at 18:41

0

In your example, you never set stringData.

answered Aug 17 '11 at 18:41

FishBasketGordo

22,904
4
58
91

score 0 · Answer 4 · answered Aug 17 '11 at 18:41

0

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

answered Aug 17 '11 at 18:41

Stephen

18,597
4
32
33

score 0 · Answer 5 · edited Jun 21 '15 at 21:00

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 '15 at 21:00

TessellatingHeckler

27,511
4
48
87

answered Aug 17 '11 at 18:42

jfriend00

683,504
96
985
979

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: http://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. – jfriend00 Aug 17 '11 at 21:38

JavaScript push to array object is not working

5 Answers5