Can't Access Object Property, Even Though It Shows Up in a Console Log

Can't access object property, even though it shows up in a console log

The output of console.log(anObject) is misleading; the state of the object displayed is only resolved when you expand the Object tree displayed in the console, by clicking on >. It is not the state of the object when you console.log'd the object.

Instead, try console.log(Object.keys(config)), or even console.log(JSON.stringify(config)) and you will see the keys, or the state of the object at the time you called console.log.

You will (usually) find the keys are being added after your console.log call.

Can't access object property even though should be there

Issue is at this line -

if (response.status !== "200") {
}

It should be 200 instead of "200". You can check the console.log("response is", response);, it's numeric 200 not string.

Note: Always use the below construct to setState for objects -

{ ...previousState, { newkey: newvalue } }

The above uses the previous values of object and replaces with new values.

Can't access object property, even though it shows up in a console log

The output of console.log(anObject) is misleading; the state of the object displayed is only resolved when you expand the Object tree displayed in the console, by clicking on >. It is not the state of the object when you console.log'd the object.

Instead, try console.log(Object.keys(config)), or even console.log(JSON.stringify(config)) and you will see the keys, or the state of the object at the time you called console.log.

You will (usually) find the keys are being added after your console.log call.

Can't access object property even though console.log clearly shows an Object with the needed property (React Redux)

I am assuming you are fetching this data async. As such, when your component is initially rendered, it has not yet populated your redux application state.

That is why you are getting 'x' of undefined.

Few ways around this:

1. Have an initialState set in your reducer
2. Use a library (at my work we use idx) safely check whether a value / property exists
3. Manually check e.g. state && state.app && state.app.data || []

Why can't I access object properties in javascript?

As others have pointed out, most probably img is in string form. You need to run JSON.parse() on it to convert it to an object, so you can access its properties.

Here I have written the JSON.parse() inside a check i.e. only when img is of type "string" should you parse it. But I think, you will always be getting img as a string, so you can simply parse it without the check.

exports.sample = function (req, res) {
    var images = req.query.images;
    images.forEach(function (img) {
        console.log(img);

        //Here, this code parses the string as an object
        if( typeof img === "string" )
          img = JSON.parse( img );

        console.log(img.path, img.id);
        console.log(img);
    });
    res.end();
};

Property of object is undefined, even though console.log on object is showing the property value

It appears that the documentBlobContentType property is set after the console.log statements. That is why console.log(this.dmDocumentLinks.documentBlobContentType) gives undefined.

As for console.log(this.dmDocumentLinks), it displays the live object in the console. The property values are evaluated only when you click on the arrow to expand the property list. By that time, the documentBlobContentType property has been set, and you can see its value in the console.

To display the object as it is when the console.log statement is executed, convert it to a JSON string:

console.log(JSON.stringify(this.dmDocumentLinks));

You can find more details on how to use console.log with objects in this article by Boris Sever.

Javascrip cannot access object properties from map method

If I have to make a guess your structure is this.

    hospitalMarkers =  [ [... markers Array 1], [... markers Array 2]]
or hospitalMarkers = [ [{Ad:1},{Ad:2}], [{Ad:3},{Ad:4}]]

so it's a nested array

what you might be needing is:

    hospitalMarkers.flat().map(() => { console.log(marker.Ad)    });
 // flat it make it come one level up
 // hospitalMarkers = hospitalMarkers = [ {Ad:1},{Ad:2},{Ad:3},{Ad:4}]

this way you will have all the markers at the same level.

Why is this object property undefined?

I've solved the problem. Basically, the object in question (that.data[0].cards) has its properties created by a function a() that runs after all the AJAX requests for the necessary XML files have been processed. I allow the requests to run asynchronously, using a counter to determine in the success callback function if a() should be called yet.

After a() runs, function b() is supposed to perform operations on that.data[i].cards. However, b() was running prior to a() being called because of a()'s reliance on the asynchronous requests. So the solution was simply to make a() call b().

So this turned out to be a pretty simple mistake on my part. What made it so confusing was the fact that logging that.data[0].cards to the console showed me that in fact the cards object had already been built, when in fact it had not yet. So the console was providing me with incorrect--or at least unclear--information.

Thanks for everyone's help last night! Upvotes all around :)

Cant access JavaScript object property

You are using asynchronous calls, but trying to treat them like they happen synchronously. That simply doesn't work as you end up trying to use a result before the networking call that requested that result has actually finished and been returned.

Look at the order of the console statements. line 13 (after the $http.get()) call happens BEFORE line 9 (in the .success handler of the $http.get()). So, at line 13, there's no way that fac.expenses is assigned yet. Even the ones labelled lines 4,5,6 happen BEFORE fac.expenses is set after line 9.

It appears that you aren't writing your code to work with Asynchronous networking calls and that is why it isn't working properly. You can ONLY reliably use fac.expenses from within the .success handler or something that is called from the .success handler.

Also, since this is a timing related issue, you can be fooled in numerous ways by debugging tools. In general, you should log the actual value you're looking for, not a parent object because console.log() may confuse you when you later trying to drill into the parent object in the log (because it has since been filled in).

---

I don't quite follow exactly what you're trying to achieve here to know exactly what to recommend, but if you want to use fac.expenses, then you must either use it inside of the .success handler where it was initially returned or you can call some other function and pass fac.expenses to that other function. You can't return it from an async callback like you're doing and expect it to be available in other chained code that may have already executed.

---

Related Topics