unable to retrieve value from JSON object

It appears that I'm having trouble accessing my object variables, most likely due to a silly mistake on my part. When I console.log my array of objects (pResult), they all look very similar with the first object expanded:

[Object, Object, Object, Object, Object, Object, Object, Object, Object]

0: Object
depTime: "2014-12-04 18:35"
destination: "Norsesund station"
nr: "562"
operator: "Västtrafik"
typText: "Buss"
__proto__: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
length: 9
__proto__: Array[0]

I attempted to do the following...

for (var i = 0; i <= pResult.length; i++) {
    var html =  html + '<tr>';
    var html =  html + '<td>';
    var html =  html + pResult[i].depTime;
    var html =  html + '</td>';
    var html =  html + '</tr>';
}

... but encountered this error message:

Uncaught TypeError: Cannot read property 'depTime' of undefined
javascriptjsonobject

Answer №1

Revise :

i <= pResult.length;

To: 

i < pResult.length;

Since arrays are 0-based indexed, with a length of 3 you only have indexes 0, 1, and 2 available.

Answer №2

To avoid using a loop, you have the option to utilize the reduce method:

var html = pResult.reduce(function(previousValue, currentValue) {
    return previousValue + '<tr><td>' + currentValue.depTime + '</td></tr>';
}, '');

Keep in mind that this method is supported in all modern browsers except IE 9+ (you can use a polyfill if necessary for older IE versions).

Answer №3

Give this a shot:

for (let i = 0; i < pResult.length; i++) {
        let html =   '<tr>';
            html +=  '<td>';
                html +=  pResult[i].depTime;
            html +=  '</td>';
        html +=  '</tr>';
}

The issue is that you are looping until the length of the array, but arrays start at index 0 so
if you have an array like this

var pResult= [object1, object2, object3];

pResult.length =3
pResult[3] does not exist and is undefined.
NOTE: Instead of recreating the variable when adding text, just append it to the existing one. For example, use html+="the added text"

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

Button react-native press following textInput within scroll view aware of keyboard movements

I'm currently facing an issue where I have a TextInput and a button nested inside a KeyboardAwareScrollView. The goal is for the user to input some text and then tap the button created using TouchableOpacity, which should send the inputted text forwar ...

javascriptandroidiosreactjsreact-native

Utilizing the Django object array in AngularJS – a comprehensive guide

I have a Django variable structured like this: [<Topic object>, <Topic object>] When passing it to Angular using ng-init, I wrote the following: <div class="profile-navigation" ng-init="ProfileTopics={{ProfileTopics|safe}} "> However, ...

javascriptpythonangularjsdjangosyntax-error

Understanding the significance of an exclamation point preceding a period

Recently, I came across this code snippet: fixture.componentInstance.dataSource!.data = []; I am intrigued by the syntax dataSource!.data and would like to understand its significance. While familiar with using a question mark (?) before a dot (.) as in ...

javascriptangulartypescript

Conditionally defining variables in JavaScript only if they are currently undefined

I have been working on extracting two keywords from a URL in the following format: localhost:3000/"charactername"/"realmname" My goal is to extract "charactername" and "realmname" and assign them to variables. Here is the code snippet I am using: var c ...

javascripthttpurl

Perform time update every second

Is it feasible to have my timeupdate function run every second? (Using VUE CLI) @timeupdate="videoSecond" videoSecond(){ let Second = this.player.currentTime(); let CaptureList = this.capturesList; CaptureList.forEach(element => ...

javascripthtmlvue.js

Tips for updating marker information upon clicking in React-leaflet

I am working on a React-leaflet map that displays markers on the left side, while on the right side, there is a list of point names. I want the behavior to be such that when a marker is clicked, the corresponding point name moves to the top of the list. Th ...

javascriptreactjsreact-leaflet

Creating an object with an array of objects as a field in MongoDB: A step-by-step guide

I have a unique schema here: const UniqueExerciseSchema = new Schema({ exerciseTitle: { type: String }, logSet: [{ weight: { type: Number }, sets: { type: Number }, reps: { type: Number }, }], }); After obtaining the da ...

javascriptnode.jsjsonmongodb

Need some assistance with Javascript Ajax? Specifically, dealing with multiple values?

My goal is to asynchronously post an array of messages using this code. Despite my efforts, I've encountered a challenge where it doesn't only post the four items in the array but also adds gibberish text. Additionally, there seems to be an issue ...

javascriptajaxasynchronous

Library package for Selenium web driver

I'm new to using Selenium web driver As I started writing my code, an error occurred in the first line. The package is showing as not accessible." Any assistance would be greatly appreciated. https://i.sstatic.net/vYUmS.png ...

javascriptjavaseleniumselenium-webdrivereclipse-rcp

Switch the dropdown selection depending on the checkbox status

I'm currently facing a bit of confusion with my project. I am constrained by an existing framework and need to come up with a workaround. To simplify, I am tasked with populating a dropdown list based on the selected checkboxes. I have managed to get ...

javascriptjqueryhtml

Error: Authentication error. fatal: Unable to access the remote repository." encountered while executing the command "yarn install

Today, while developing a web application, I encountered an issue with the "yarn install" command. Upon running "yarn install", the console displayed an error message: "Host key verification failed. fatal: Could not read from remote repository." I attemp ...

javascriptreactjsgithubnpmyarnpkg

What exactly does the term "new.target" refer to?

The ECMAScript 2015 specification references the term new.target a total of three times - once in section 14.2.3: Although Contains typically does not analyze most function forms, it is specifically used to identify new.target, this, and super usage wit ...

javascriptecmascript-6

The choice between using inline style objects with React or utilizing traditional CSS classes presents distinct advantages and

Is there a discernible difference between utilizing an inline style object for react components and using a normal CSS class through the className attribute? Even when wanting to modify styles based on a specific event, simply changing the className should ...

javascriptreactjs

Dynamic jQuery URL truncater

Is there an on-the-fly URL shortener similar to Tweetdeck available? I have come across several jQuery and JavaScript plugins that can shorten a URL through services like bit.ly when a button is clicked. However, I am looking for one that shortens URLs aut ...

javascriptjqueryurl-rewritingbit.lyurl-shortener

obtain a Javascript variable within a Jade template by using inline code

script. var hide_section = 'block'; .title(style='display:#{hide_section}') I received an undefined value, any thoughts on why? Could it be because #{hide_section} is trying to access a variable from the back-end, such as the cont ...

javascriptnode.jspug

What is the preset value for the payload in a vuex action?

Currently, I am utilizing an if-else statement in my Vuex action to set a default value for a payload property. Specifically, I check if the passed payload object contains a delay property; if it does not, I assign it a default value and handle appropriate ...

javascriptvue.js

"Use the data-attribute to dynamically append a child element to the

Here are a couple of divs that look like this: <div id="thisisme" data-order="1"> <div id="thisisme" data-order="2"> I am looking to insert some content into the specific div with data-order = 1. The following Javascript code is what I have t ...

javascriptnode.jselectronappendchild

Best practice for finding the parent element using Protractor

The recently released Guidelines advise against using the by.xpath() locators. I am making an effort to adhere to this suggestion, but I'm having difficulty locating a parent element. We are currently utilizing the .. XPath expression to access the p ...

javascriptseleniumxpathselenium-webdriverprotractor

What is preventing me from using AJAX to input data into sqlite?

Implementing a local save feature in my Web App is proving to be quite challenging. Every time I attempt to send data in any form, I consistently encounter the following error: A builtins.TypeError occurs, followed by a stack trace in /SaveFile and jquery ...

javascriptjqueryajaxsqliteflask

What is the best method for setting a session cookie securely while also using CSRF tokens?

In my express application, I am working on setting the session cookie to be secure. Here is the code snippet I have tried so far: app.use(express.cookieParser()); sessionOptions = definitions.REDIS; sessionOptions.ttl = definitions.session.expiration; app ...

javascriptnode.jsexpress