How does Object.keys work when applied to a Javascript variable? - javascript

I have some code in my application like this:
var msg = data.data.modelState[Object.keys(data.data.modelState)[0]];
Can someone please explain what the Object.keys part of this code is doing and give me some idea what the data.datamodelState object looks like.
Right now it is my understanding that this code is not working but the code around it is not so I can't debug to find out.

Object.keys() returns array of keys of that object. In your code, you are accessing first element of array. i.e. first key of data.data.modelState.
This code is just to get the value of first key of data.data.modelState.
For Example
Suppose
data.data.modelState={tmpkey:"Some Value"}
var msg = data.data.modelState[Object.keys(data.data.modelState)[0]];
console.log(Object.keys(data.data.modelState)[0]); //will Print ["tmpkey"]
console.log(msg); //It will print "Some Value";
You can access any key of object using []; And here you are accessing first key.
var msg = data.data.modelState[Object.keys(data.data.modelState)[0]];
This will become
var msg = data.data.modelState[["tmpkey"][0]];
And it will become
var msg = data.data.modelState["tmpkey"]; //Simply it will return value of tmpKey property.

Related

javascript how to add new object into object after it has been created

This is my object:
var example = {"119":{"bannerId":"119","overlay":"3","type":"1",...},"210":{"bannerId":"210","overlay":"3","type":"1",...},...}
In this way I can very easily access or modify object. For example if I want to add new property I simply call this:
example[119].newProperty = 1;
And very easily access it:
alert(example[119].newProperty)
alert(example[210].type)
By knowing banner id, I can access any data from any scope of code, this is the reason I chose this pattern. The problem is that I need to add new object inside example after it has been created. For example I need to push this into example:
{"30":{"bannerId":"119","overlay":"3","type":"1",...}}
And I don't know if this is possible. Is it? One way to solve this problem would be to use array, so example would be array and each key would carry object, and I could push into array new key with object. But I am not sure if this is proper way because key will start with 200, 300, ... console.log(example) shows undefined for all keys before 200. Is fine to have so many empty keys? Is any other better way?
EDIT:
I realized this can be done also with object. The problem was because I was trying to assign new property directly into new object like this:
example[200].example3 = 2;
guessing it is enough that example object is created. What I was missing is this line:
example[200] = {}
Thanks for answers, it works now!
var example = {};
example["30"] = {"bannerId":"119","overlay":"3","type":"1"}
console.log(example);
If its inside a loop you can also try something like below.
var i = 0;
var example = {};
for (i=0; i<10; i++) {
example[i] = {bannerId : i+1 , someOtherItem : i + "Hello"}
}
console.log(example);
example[30] = {"bannerId":"119","overlay":"3","type":"1",...};
You can always access (and assign) ad hoc keys of objects, even if you didn't define them in the first place.
So for your example you can just do:
example["30"] = {... /*your new object*/...}
It seems that you want to extend your object, you could use jQuery or underscore more or less like this:
$.extend(true, example, { "30": { objectId: "201" }}); // deep copy
If you don't want to use any library simply do:
example["30"] = myObj["30"];

Reading an object's value in JavaScript

I want to get the features from my layer. So I'm requesting WMSGetFeatureInfo method after a successful request for GetFeatureInfo on my layer.
The returned object is structured like this:
I can read values like BEVDICHTE with var bevdichte = features.BEVDICHTE and so on.
But when I want to get the value of the_geom with var the_geom = features.the_geom it returns an object. Yes it is nested so this is intended but my question is how to get the value ol.geom.MultiPoint
from the_geom?
EDIT:
Unfortunately var target = features.the_geom['actualEventTarget_']; will just return another 'actualEventTarget_' object. This is because the the_geom object is nested into infinity. I attached another screenshot to describe my problem. There are many more nested eventTargets following. Yet I was not able to get the property ol.geom.MultiPolygon.
To access a nested array, just use brackets: '[ ]'
var nestedArray = [[1,2], [3,4]];
var nestedArrayValue = nestedArray[0][0];
// --> returns 1
With your example:
var target = features.the_geom['actualEventTarget_']
By the way, from the looks of it var the_geom = features.the_geom doesn't seem like an array. It has keys, mapped to a value, are you sure this is an array, not an object?

Javascript: Calling a function in an object literal

I'm learning to program in Javascript and I'd like some help/clarification.
I declared an array that contains animal names. I defined a function that I use to split a string in two. Then I create an empty object literal and add an animal and corresponding breed. I'm trying to invoke the separateWords function in the object literal, but I need some clarification. Here's my code:
var myPets = ["Bengal Bobcat", "Beagle"];
var separateWords = function (string) {
return string.split(" ");
};
var nameCollection = {};
nameCollection.cat = separateWords(myPets[0]);
nameCollection.dog = myPets[1];
nameCollection.fish = null;
When I enter console.log(nameCollection) I get the following:
Object {cat: Array[2], dog: “Beagle”, fish: null}
cat: Array[2]
0: "Bengal"
1: "Bobcat"
length: 2
However, when I enter console.log( separateWords(myPets[0])), I see:
[“Bengal”, “Bobcat”]
I don’t understand why the value of cat shows up as Array[2].
The console displays it as Array[2] as it would be (potentially) unreadable if it expanded it fully. One way to see everything is to stringify it using JSON.stringify which goes through each item in the object recursively and calls toString() on it:
var myPets = ["Bengal Bobcat", "Beagle"];
var separateWords = function (string) {
return string.split(" ");
};
var nameCollection = {};
nameCollection.cat = separateWords(myPets[0]);
nameCollection.dog = myPets[1];
nameCollection.fish = null;
document.body.textContent = JSON.stringify(nameCollection);
You are assigning to cat the result of the separateWords() function call, passing myPets[0] as a parameter.
separateWords() returns an array and with the myPets[0] input it returns a new array with the "Bengal" and "Bobcat" values splitted by the whitespace.
The split() function is the one creating an array with the splitted values and this result is returned by your separateWords() function, which also is the value assigned to the cat object member.
Each browser implements its console like it wants.
So your browser decided to implement the behavior you describe.
If you don't like it, propose a better idea to the developers of this browser. Or use another browser.
I am going to assume you are using Chrome Developer Tools or Firebug.
Developer tools condenses arrays and objects into easily readable lines you then inspect further with. What I mean is, you push the little arrow next each line in the console log to further inspect each object. I will use pictures to explain this.
Here I am assigning an array and then assigning an element in an object to that array as so:
As you can see when I log the object it show's an Array[2] rather than expand the array. In this next picture I then expand the array to inspect it.
Why is this exactly? My first thought is ease of readability. If you have an app that is complex and you have numerous debugging console logs, you can see all the logs on single lines making it easier to hunt down specific logs. As well, if you have a very large and complex object, it is arguably easier to read all the root elements on each line without expanding all the objects and arrays found within that object recursively.
String.prototype.split() returns an array containing the two values in the string which have been split. Read through this.
nameCollection.cat = separateWords(myPets[0])[0]; // nameCollection.cat == Bengal
nameCollection.cat = separateWords(myPets[0])[1]; // nameCollection.cat == Bobcat
This is simply how javascript (and many other languages) work. When you try to print "nameCollection" javascript doesn't automatically do a nice job of printing the cat array. Instead, it simply prints some type related information, which in this case is saying "cat" is an array of length 2.

Every character in an array being recognized with ".hasOwnProperty(i)" in javascript as true with Google Apps Script

This is the array:
{"C8_235550":
{"listing":"aut,C8_235550_220144650654"},
"C8_231252":
{"listing":"aut,C8_231252_220144650654"}}
It was fetched with a GET request from a Firebase database using Google Apps Script.
var optList = {"method" : "get"};
var rsltList = UrlFetchApp.fetch("https://dbName.firebaseio.com/KeyName/.json", optList );
var varUrList = rsltList.getContentText();
Notice the .getContentText() method.
I'm assuming that the array is now just a string of characters? I don't know.
When I loop over the returned data, every single character is getting pushed, and the JavaScript code will not find key/value pairs.
This is the FOR LOOP:
dataObj = The Array Shown At Top of Post;
var val = dataObj;
var out = [];
var someObject = val[0];
for (var i in someObject) {
if (someObject.hasOwnProperty(i)) {
out.push(someObject[i]);
};
};
The output from the for loop looks like this:
{,",C,8,_,2,3,5,5,5,0,",:,{,",l,i,s,t,i,n,g,",:,",a,u,t,,,C,8,_,2,3,5,5,5,0,_,2,2,0,1,4,4,6,5,0,6,5,4,",},,,",C,8,_,2,3,1,2,5,2,",:,{,",l,i,s,t,i,n,g,",:,",a,u,t,,,C,8,_,2,3,1,2,5,2,_,2,2,0,1,4,4,6,5,0,6,5,4,",},}
I'm wondering if the array got converted to a string, and is no longer recognized as an array, but just a string of characters. But I don't know enough about this to know what is going on. How do I get the value out for the key named listing?
Is this now just a string rather than an array? Do I need to convert it back to something else? JSON? I've tried using different JavaScript array methods on the array, and nothing seems to return what it should if the data was an array.
here is a way to get the elements out of your json string
as stated in the other answers, you should make it an obect again and get its keys and values.
function demo(){
var string='{"C8_235550":{"listing":"aut,C8_235550_220144650654"},"C8_231252":{"listing":"aut,C8_231252_220144650654"}}';
var ob = JSON.parse(string);
for(var propertyName in ob) {
Logger.log('first level key = '+propertyName);
Logger.log('fisrt level values = '+JSON.stringify(ob[propertyName]));
for(var subPropertyName in ob[propertyName]){
Logger.log('second level values = '+ob[propertyName][subPropertyName]);
}
}
}
What you have is an object, not an array. What you need to do is, use the
Object.keys()
method and obtain a list of keys which is the field names in that object. Then you could use a simple for loop to iterate over the keys and do whatever you need to do.

How to get the key of an array object?

Given a JSON respond to a form I need to parse through the JSON elements to find error messages with their associated element the error is tied to.
The data is returned in JSON format with the error messages as the last variable pair looking like this:
"invalid":[{"field1":"Field 1 is required"}]
This ends up having an object/array for each error showing the item's name(key) along with the associated error for that field. Given that my error handling form is unaware what the key names will be how do I go about getting both the key and the value out of this object/array?
I'm using dojo on this project and I'm not familiar with it at all so I've been attempting to use dojo functions when possible if something exists that can handle this. Currently there is where I am :
var retObj = dojo.fromJson(ioargs.xhr.responseText);
dojo.forEach(retObj.invalid, function(entry,i){
console.debug(entry);
});
The console output is:
Object { field1="Field 1 is required"}
My goal is to pull out the value "field1" so I know which input field this error is assigned to, then to assign the value of field1 to that error field.
Thanks!
Dunno a single thing about Dojo, but you're looking for a pretty basic for in loop.
var retObj = dojo.fromJson(ioargs.xhr.responseText),
invalids = retObj.invalid[0],
res = {}; //here will be your final key=>value
for (var key in invalids) {
res[key] = invalids[key];
}
http://jsfiddle.net/DgXkq/
You might also be interested in https://stackoverflow.com/search?q=%5Bjavascript%5Dparsing+json
There is no way to find the key of an object if you don't have access to the parent object. I believe the best solution in this case would be to massage the JSON to pass more meaningful information to the validator, that is, an object with two properties, fieldName and errorMessage.
// Returns the name of an object's first key
function getKeyName(obj) {
for (var prop in obj) {
return prop;
}
}
// This is the response from the server
var response = { "invalid":[{"field1":"Field 1 is required"}] };
// This is going to be the massaged array that
// contains more meaningful information.
var invalids = [];
for (var i=0; i < response.invalid.length; i++) {
var obj = response.invalid[i];
var key = getKeyName(obj);
invalids.push({fieldName: key, errorMessage: obj[key]})
}
Now invalids contains an array of more meaningful error message objects like
invalids = [{fieldName: 'field1', errorMessage: 'Field 1 is required'}]
Just pass that object to your validation routine. If possible, I would change the server code to return error messages in the format I suggested so you don't have to do extra work.

Categories

Resources