Having issues with adding elements to an array object in JavaScript

Question

Having issues with adding elements to an array object in JavaScript

I've got some HTML code that looks like this:

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'm attempting to set a value and then retrieve it again for testing purposes, but I'm not seeing any changes. I'm puzzled as to where I may have gone wrong...?

javascript json

Answer 1

Answer №1

Perhaps you overlooked the step of storing the stringify result in the stringData variable, causing a JavaScript error before reaching the line where you attempt to alert the value.

jQuery does not provide JSON or JSON.stringify, so you need to include the json2 library on the page if the browser does not natively support it.

Here is a modified code snippet:

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

Below is the code for removing an element from an array based on a specific request:

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

//Now newArray will no longer contain '1234'

Answer 2

Perhaps you overlooked the step of storing the stringify result in the stringData variable, causing a JavaScript error before reaching the line where you attempt to alert the value.

jQuery does not provide JSON or JSON.stringify, so you need to include the json2 library on the page if the browser does not natively support it.

Here is a modified code snippet:

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

Below is the code for removing an element from an array based on a specific request:

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

//Now newArray will no longer contain '1234'

Answer 3

Answer №2

Adjustment

Convert jsonArray to a string using JSON.stringify()
// Instead of
var stringData = JSON.stringify(jsonArray);

Resolved other issues with the code snippet: http://jsfiddle.net/mattball/qWCwa/7/

Answer 4

Adjustment

Convert jsonArray to a string using JSON.stringify()
// Instead of
var stringData = JSON.stringify(jsonArray);

Resolved other issues with the code snippet: http://jsfiddle.net/mattball/qWCwa/7/

Answer 5

Answer №3

One thing to note in your sample is that you haven't initialized the variable stringData.

Answer 6

One thing to note in your sample is that you haven't initialized the variable stringData.

Answer 7

Answer №4

Access the "value" property of the input element directly instead of using getAttribute and setAttribute methods.

Answer 8

Access the "value" property of the input element directly instead of using getAttribute and setAttribute methods.

Answer 9

Answer №5

After making the necessary adjustments to assign stringData, everything seems to be functioning correctly:

function combineObjects(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'));
}

combineObjects(1, 2);

You can view the updated code in action here: http://jsfiddle.net/jfriend00/HNuak/.

Just a heads up, if you run into any issues, using tools like Chrome or Firefox debuggers can help pinpoint and resolve errors more effectively.

Answer 10

After making the necessary adjustments to assign stringData, everything seems to be functioning correctly:

function combineObjects(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'));
}

combineObjects(1, 2);

You can view the updated code in action here: http://jsfiddle.net/jfriend00/HNuak/.

Just a heads up, if you run into any issues, using tools like Chrome or Firefox debuggers can help pinpoint and resolve errors more effectively.

Having issues with adding elements to an array object in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is there a way to switch up the dropdown chevron using only CSS after a click?

Generating a JSON String on iOS

Tips for performing an update in AWS DynamoDB with Node.js

Guide on retrieving simplejson in Python

Display a loader while waiting for an API call to complete within 5 seconds using Angular and RxJS operators. If the API call takes longer

Can JavaScript be used to modify the headers of an HTTP request?

It is advised not to use arrow functions to assign data when fetching API data with axios in Vue.js 2

Using $state.go within an Ionic application with ion-nav-view may cause unexpected behavior

Looking to showcase a loading gif inside a popover before swapping it out with ajax-generated content

Attempting to route a selector, yet on the second attempt, the entity is successfully transferred

a single button with dual functionalities

Stylish Navigation Menu Logo/Site Name

What is the reason for sending back an array with no elements in AJAX

Using jquery.ajax triggers a non-object exception

Combine multiple arrays in JavaScript into a single array

JavaScript: Retrieving the following element from the parent container

How to maximize efficiency by utilizing a single function to handle multiple properties in Angular

What is the best way to eliminate "?" from the URL while transferring data through the link component in next.js?

Are there any alternative solutions to the onunload event in Chrome, or any other ways to achieve the

Mongoose and MongoDB in Node.js fail to deliver results for Geospatial Box query