What is the best way to navigate through multi-dimensional arrays of objects in JavaScript?

I am trying to access JavaScript objects that are stored in a multi-dimensional array, which is being exported by a WordPress plug-in. Unfortunately, I cannot make changes to the code to use a single array.

There are two arrays called "employees". Is this array format compatible with JavaScript? The JSON export was originally intended for PHP processing.

(Please note that the code provided below is a simplified model used to demonstrate the issue).

var data = '{"employees":[{"firstName":"John0"},  {"firstName":"Anna0"},{"firstName":"Peter0"}],"employees":[{"firstName":"John1"},  {"firstName":"Anna1"},{"firstName":"Peter1"}]};';

var json = JSON.parse(data);

document.querySelector('#test').innerHTML = json.employees[2].firstName;

Check it out on JSFiddle:

https://jsfiddle.net/2524fhf4/11/


For example, how would one go about accessing the value "Peter0" in the first array? In a single array, it could be accessed as shown below:

var result = json.employees[2].firstName;

It seems like in this current format, we can only access the values from the last array.

Answer №1

It seems that when using this particular format, access is limited to the last array.

This occurs because in an object literal with two or more keys of the same name, the last key will take precedence over the others.

Feel free to view this demo

var data = '{"employees":[{"firstName":"John0"}, {"firstName":"Anna0"},{"firstName":"Peter0"}],"employees":[{"firstName":"John1"}, {"firstName":"Anna1"},{"firstName":"Peter1"}]}';
console.log(JSON.parse(data)); //only the first one is displayed

In the above example, you can observe that there is only one key for the data

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract the ID from the array, save it, and then delete it from the local storage

I am currently developing a mobile application using Angular, JavaScript, Ionic, and Cordova. Within one of my functions, I make use of an array called existingEntries, which is stored as a variable. categories: Array [276] [0...99] 0: Object id ...

Exploring nested JSONObject and JSONArray in Android, unravel the intricacies of

The JSON data structure I am working with is as follows: { "head": { "title": "Music", "status": "200" }, "Info": [ { "Name": "Mos Def", "Type": "music", "Results": [ { "Name": "Talib Kweli", ...

Is it possible to develop in React without using webpack, relying solely on Gulp instead?

Although I appreciate some aspects of Webpack, my enthusiasm for it wanes as the configuration files grow beyond 15 lines. It becomes overly cryptic, difficult to configure, and time-consuming. Therefore, I tend to reserve its use for just a couple of task ...

Implement CSRF protection for wicket ajax requests by adding the necessary header

I'm currently working on a website created with Apache Wicket and we're looking to enhance its security by implementing CSRF protection. Our goal is to keep it stateless by using a double submit pattern. For forms, we are planning to include a h ...

What could be causing the "undefined" property error in my Vue.js component?

In my Vue.js application, I have several components that are structured similarly and are all throwing the same error: TypeError: Cannot read property 'id' of undefined I initially attempted to resolve this issue by enclosing {{ jobs[0].id }} w ...

Newbie in JavaScript seeking help with JSON indexing: What could be causing my script using (for ... in) to fail?

Not being a seasoned Javascript coder or very familiar with JSON, my approach may seem naive. Any recommendations for better solutions are appreciated. Below is the code I've written: <!DOCTYPE html> <html> <head> <script& ...

Issue with 1.bundle.js not loading during webpack production build with routing

I have been encountering an issue with my test repository for this specific problem (Link) It appears that the problem lies within the localization file, as I am using react-intl. The development version seems to be functioning properly. This is what&ap ...

What is the best way to utilize v-select for searching entries while also allowing users to type in text within the input field for the search?

How can I implement a fold-out display for entries in a v-select field while also enabling text search functionality to find specific items? Are there any Vuetify props that address this, or do you have any suggestions on how to approach this? <v-sele ...

Can you provide a succinct explanation of what constitutes a well-defined "landing page"?

Could someone provide a clear and concise explanation of what exactly constitutes a landing page and how it should be utilized? I'm struggling to grasp the concept. Where is the optimal placement for a landing page on a website? Is it best placed o ...

Unresolved promise: Internal server issue

I encountered an exception while working on my Nativescript app. EXCEPTION: Uncaught (in promise): Server error JS: ORIGINAL STACKTRACE: JS: Error: Uncaught (in promise): Server error JS: at resolvePromise (/data/data/com.yourdomain.appname/files/app/ ...

Error 404 occurred when trying to access the webpack file at my website address through next js

Check out my website at https://i.stack.imgur.com/i5Rjs.png I'm facing an error here and can't seem to figure it out. Interestingly, everything works fine on Vercel but not on Plesk VDS server. Visit emirpreview.vercel.app for comparison. ...

One can pass parameters to a promise's success callback within AngularJS using $q

I have encountered a situation that is similar to the one described in this post, but I am still unsure about how to implement it. I could use some assistance with setting up a successful callback. This is the current functioning code: function getStuff( ...

Error occurred while fetching image from Medium story API in Next.js

While working on my Next.js app, I encountered an issue with the Medium story API. Every time I try to fetch and display an image using the API, I receive an error message stating "upstream image response failed." The specific error code is: upstream image ...

The presence of certain characters is leading to problems in the console

Similar Question: Escaping a String for JavaScript Usage in PHP? The characters in my text are causing errors. When I input special characters such as: !\"$%^&()-=\'.,:;/?#~/\\>< An error saying "Syntax error ...

Is there a way to attach a React component to an HTML element called i?

I've been implementing the winbox modal library and have encountered an issue when trying to add a React node to it. The modal offers an html parameter that accepts an HTML string like div.innerHTML = <div>hello</div>. The code snippet is ...

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

I am currently utilizing the jQuery select2 plugin to enable multiple selections. My goal is to incorporate a checkbox for each selectable option. Depending on whether the checkbox is checked or unchecked, the dropdown option should be selected accordingl ...

Link a template to a formly field when clicking on another field within an Angular formly form

Recently, I have been utilizing a Formly form that includes a section for displaying dynamic HTML content. Within this form, I am using the template field to initialize some HTML content when the page loads. However, I have encountered an issue where chang ...

Navigate to a different web page within the body tag without changing the current URL by utilizing a hash symbol

I am working with two HTML files, index.html and about.html. My goal is to display the content of about.html within my index.html without navigating away from it. After observing many websites, I noticed that they often use #about in their URLs to dynamic ...

Alter the background of cards in real-time

I am unfamiliar with JavaScript, but I wish to utilize a function to alter the background color of multiple cards. function ChangeColorToGreen() { document.getElementById("ChangingCard").style.background = "green"; } function ChangeColorToPurple() { ...

Sharing and displaying images on Sails JS platform

Using Sails JS, I am attempting to upload an image and display it in a view. Queries: The uploaded image is located in .tmp/uploads, how can I retrieve it from a view? Is there a method to access the uploaded image? The image's name is altered in ...