unable to retrieve value from JSON object

Question

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

javascript json object

Answer 1

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

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 3

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 4

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 5

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"

Answer 6

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"

unable to retrieve value from JSON object

Answer №1

Answer №2

Answer №3

Similar questions

Does anyone know if it's feasible to return a value from PHP to an HTML form without relying on JavaScript?

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Executing asynchronous functions synchronously

Vanishing HTML upon initial entry to the site using Gatsby and Material UI exclusively in live deployment

Error code 403 has been reported by Stripe's payment_init.php as a forbidden request

NextJs redirection techniquesWould you like to learn the best ways

Converting Nested Classes into Rows in a Table using Spring Framework

Retrieve an array from JSON encoding using AJAX

Having trouble with MUI auto import suggestions in my Next.js 13 project on VS Code

Utilizing a combination of ORMLite, JSON, and foreign objects revolution

Merging nested JSON arrays with column groups in Snowflake

Extracting data from a Wikipedia table using web scraping in JavaScript

Troubleshooting Vue.js data binding problems

The browser message states: Variable $? Not Found

Improving functions in vue.js

Improving a Vue.js notification component with data retrieved from a fetch request result

Animated CSS Checkmark Design

Using raphaeljs and freetransform in conjunction with clip-path

Having trouble with $addToSet and $push not working in updates using Mongoose with MongoDB in Node.js?

Transforming JSON data into string format