Working with Javascript objects and arrays

Question

Working with Javascript objects and arrays

Need assistance with manipulating/updating a JavaScript array. Hoping for some help.

The initial array looks like this:

 array('saved_designs'=array());

In Javascript JSON format:

 {"saved_design":{}}

I plan on adding a label and its associated array data:

 array("saved_designs"=array('label'=array('class'='somecssclass',styles=array(ill add more assoc elements here),'hover'=array(ill add more assoc elements here))))

Javascript version:

 {"saved_designs":{"label":{"class":"someclass","style":[],"hover":[]}}}

The goal is to be able to append/modify this array. If 'label' already exists, then update the corresponding sub-data. If 'label' doesn't exist, append a new dataset to the 'saved_designs' element.

If 'label' is not defined, add the following to the 'saved_designs' element:

 array('label2' = array('class'=>'someclass2',styles=array(),'hover=>array()')

I'm having trouble understanding the usage of [] and {} in JavaScript notation.

I may need further discussion as answers are provided. Here's the code I currently have:

 //saveLabel = label user chose for this "design"
 if(isUnique == 0){//update
      //prompt user if they want to overwrite design styles for specified html element
      if (confirm("There is already a design with that label ("+saveLabel+"). Overwrite this design's data for the given element/styles?")) {
           currentDesigns["saved_designs"][saveLabel]["class"] = saveClass;
           //edit other subdata here...
      }
 }else{//create new
      var newDesign = [];
      newDesign[saveLabel] = [];
      newDesign[saveLabel]["class"] = saveClass;
      newDesign[saveLabel]["style"] = [];
      newDesign[saveLabel]["hover"] = [];

      currentDesigns["saved_designs"].push(newDesign);//gives error..push is not defined
 }      
 jQuery("#'.$elementId.'").val(JSON.stringify(currentDesigns));

Thank you in advance. Hope everything is clear. Will update based on questions and comments. Shaun

javascript arrays javascript-objects

Answer 1

Answer №1

It can get a bit tricky. JavaScript objects resemble a map or a dictionary from other programming languages. You can loop through them and retrieve their properties using object['property_name'].

Therefore, the distinction between a property and a string index is blurred. This appears similar to php code you are writing. In php, it's called an array, but since you are referencing values by a string, it will be serialized into an object in javascript.

var thing = {"saved_designs":{"label":{"class":"someclass","style":[],"hover":[]}}}

thing.saved_designs.label is equivalent to thing["saved_designs"]["label"].

In javascript, an array is a sequence that can only be accessed by integer indices. Arrays don't have explicit keys and can be created as follows:

var stuff = ['label', 24, anObject]

So, the error you're encountering about 'push not defined' is because you're not operating on an array as per javascript standards.

currentDesigns["saved_designs"] == currentDesigns.saved_designs

When you have an object and want to add a new key/value pair (i.e., property), you simply define the key and the value:

**currentDesigns.saved_designs['key'] = newDesign;**

If each design has a different label (which seems to be the case), the key would be that label (a string).

Furthermore, while you were defining the new design, this is how javascript understands it:

 var newDesign = [];

newDesign is an array. It contains various elements accessible by integer indices.

 newDesign[saveLabel] = [];

Since newDesign is an array, saveLabel should be a numerical index. The value at that index is another array.

 newDesign[saveLabel]["class"] = saveClass;
  newDesign[saveLabel]["style"] = [];
  newDesign[saveLabel]["hover"] = [];

Here, you are explicitly trying to use an array as objects. Arrays do not support ['string_key'].

This may seem to 'work', but only because in javascript arrays are objects and there is no strict rule against adding properties to objects freely. However, all these [] are not really aiding you.

var newDesign = {label: "the label", class: saveClass};

is likely what you are aiming for.

Answer 2

It can get a bit tricky. JavaScript objects resemble a map or a dictionary from other programming languages. You can loop through them and retrieve their properties using object['property_name'].

Therefore, the distinction between a property and a string index is blurred. This appears similar to php code you are writing. In php, it's called an array, but since you are referencing values by a string, it will be serialized into an object in javascript.

var thing = {"saved_designs":{"label":{"class":"someclass","style":[],"hover":[]}}}

thing.saved_designs.label is equivalent to thing["saved_designs"]["label"].

In javascript, an array is a sequence that can only be accessed by integer indices. Arrays don't have explicit keys and can be created as follows:

var stuff = ['label', 24, anObject]

So, the error you're encountering about 'push not defined' is because you're not operating on an array as per javascript standards.

currentDesigns["saved_designs"] == currentDesigns.saved_designs

When you have an object and want to add a new key/value pair (i.e., property), you simply define the key and the value:

**currentDesigns.saved_designs['key'] = newDesign;**

If each design has a different label (which seems to be the case), the key would be that label (a string).

Furthermore, while you were defining the new design, this is how javascript understands it:

 var newDesign = [];

newDesign is an array. It contains various elements accessible by integer indices.

 newDesign[saveLabel] = [];

Since newDesign is an array, saveLabel should be a numerical index. The value at that index is another array.

 newDesign[saveLabel]["class"] = saveClass;
  newDesign[saveLabel]["style"] = [];
  newDesign[saveLabel]["hover"] = [];

Here, you are explicitly trying to use an array as objects. Arrays do not support ['string_key'].

This may seem to 'work', but only because in javascript arrays are objects and there is no strict rule against adding properties to objects freely. However, all these [] are not really aiding you.

var newDesign = {label: "the label", class: saveClass};

is likely what you are aiming for.

Working with Javascript objects and arrays

Answer №1

Similar questions

Putting a Pause on CSS Transition using jQuery

When using nativescript-vue to navigate to a Vue page, the props are cached for later

Retrieve the unique identifier of a single post from a JSON file within a NuxtJS project

Tips for executing an npm command within a C# class library

Can select2 and a jQuery Virtual Keyboard work together seamlessly?

Issue with styling Icon Menu in material-ui

Learn how to easily incorporate a drop-down list into the material-UI Search component within the navbar to enhance the search results

Tips for implementing jQuery on HTML loaded post document.ready():

Discover instances of a string within an array using JQuery

Making an Ajax request from within an iframe using the easyXDM framework

Comparison of jQuery, AngularJS, and Node.js

The ImportJSON function in Google Sheets is failing to return results when using a path with an

What is the best way to transfer the userId from the browser to protractor?

Error: The function expressJwt is not recognized as a valid middleware

Implementing swipe functionality to Bootstrap carousel

Transforming an array into a JSON object

Angular directive preventing default action but Chrome still loading image on drag

Utilizing HTML5 canvas to extract pixel data from an image loaded from an external source

AngularJS ng-show will not function properly with newly added DOM elements

Guide on transmitting information from two separate pages to a PHP script simultaneously using an AJAX request