Strange behaviour with angularJS $scope.$parent - javascript

I'm have having some trouble accessing a value from the parent scope, and what appears to be some strange behaviour also.
If I log $scope.$parent to the console and inspect the DOM object there is a property topicDiscovery.name. However, when I try to log this ($scope.$parent.topicDiscovery.name) it returns undefined.
Also, when I try to log the topicDiscovery object it returns an empty array, even though when its not empty in the DOM for $scope.$parent.
Why is this?

This means $scope.$parent.topicDiscovery is getting changed after console.log. Google chrome doesnot print all json object when you do console.log. It just refer to current Object. Try using JSON.stringify($scope.$parent), Here you will not get this property as stringify converts that JS object to string and there will not be any memory linking between orignal object and string.
Here is best example.
var d={z:{b:{}}};
console.log(d); //When you check here, d.a_1 is available
console.log("d.a_1",d.a); //Here d.a_1 is not available.
//Here I am adding d.a_1 property
for(var i=0;i<10;i++){
d['a_'+i]=i;
}

Related

How to store HTML Elements as global variable in the console

When I use chrome developper tools, for any variable that I logged to the console using console.log, I can right-click and select Store as global variable, except if I log a HTML Element.
I found a workaround: if using console.log([el]) instead of console.log(el), it is possible to save the array to a global variable and then use temp1[0] to access the element.
This seems somehow cumbersome. Is there another way to store a console.logged element in a global variable in the console ?
You can use $$(selector)
ƒ $$(selector, [startNode]) { [Command Line API] }
then use the procedure described at the Question.
$_ returns the last logged item in the console.
Beware, though, that it might return undefined if you use console.log(), because if you do console.log('hi!');, then it will also return undefined. To workaround:
/*just type value instead of console.log*/
'hello!';
var text=$_;
/*If you cannot do this, just log it in this way:*/
x.valueOf();
var xContent=$_;

How DOM reference variable works

All:
I am new to DOM, I got one question about DOM reference, for example(suppose I use D3.js or jQuery):
var domelement = d3.select("div#chart");
d3.select("div#chart").remove();
console.log(domelement);
When I print domelement, it still show an Object in the console even though it has been deleted from the DOM structure.
So I am wondering, why this variable still has access to the DOM object?
How can I decide if a reference is invalid?
Thanks
So I am wondering, why this variable still has access to the DOM object?
You retrieved a reference to an object in memory and your variable will retain it for as long as you have it in scope.
You can mutate an object having a reference to it but you cannot destruct it (not in JS).
How can I decide if a reference is invalid?
There is no such a thing as "invalid" reference. If you want to check if the element is still mounted in the DOM - you can just try to search for it. If it's there - you'll find it, and you will not otherwise.
.remove() returns the value (like a return function in javascript). When you use console.log this value is printed but it no longer exists in the DOM. HTML elements can exist as data nodes in javascript (document.createElement).
In this state, they exists as data, but haven't been added anywhere where they'd be visible. .remove() cuts the element out of the body and returns it in its data form, then console.log prints it.

Javascript object property logs normally but is undefined?

I have a Javascript object that gets initialised in an asynchronous manner, later edited and then stored in an array until it can be saved. The problem is that one of the checks it goes through is _.has(obj, 'Id'). This test always fails. I've used JSON.stringify() to log the object's internals and everything has its value and looks correct. When I run a simple test of this line with hard-coded values in plunker, everything works as expected. I've tried accessing the Id values through obj.Id and obj['Id'] but these both return undefined and I don't know why. Why can stringify read the property but a regular accessor can't? The Id is a value that is not touched between initialisation and saving of the object.

js obj supposedly passed by reference, but appears cloned

I have learned that objects in javascript is passed by reference, so if I delete one, they will both be inaccessible.
Now,
var self = self.parent.modules[moduleId].slideshow;
delete self.parent.modules[moduleId].slideshow; //remove the module object from the JSON
console.error('deleted self. it is now:');
console.error(self.parent.modules[moduleId].slideshow);
that console prints undefined, as expected. However, if I do this:
console.error('deleted self. it is now:');
console.error(self);
It still has the object to present me with, as if it was actually cloned?
You deleted the property not the value that property referenced.
Other references that value are unaffected.

Why is the property of JSON object not accessible?

I'm not able to access progress property of data object. I used debugger to stop the application and check if data object is defined. Here's the screenshot of the console and it completely makes no sense.
data is an Array. You want data[0].progress.
Data is an array, as evidenced by the fact that in the console it has brackets.
In order to access the object inside it, you need to use array index notation, like so:
data[0].progress //0

Categories

Resources