JSON inside JSON-like object javascript - javascript

I have generated a json-type variable:
var jsonLines = [[{"x":"275","y":"231"},{"x":"124","y":"237"}],[{"x":"201","y":"157"},{"x":"275","y":"231"}],[{"x":"215","y":"307"},{"x":"201","y":"157"}],[{"x":"342","y":"188"},{"x":"215","y":"307"}]];
I want to parse this JSON-like object and print the corresponding entities. I tried many solutions of similar problems here at SO, but nothing worked on this ( for each loop, by indexing etc.). It'll great if anyone could help me out. Thank you.

JSON is short for JavaScript Object Notation. What you have there is a Javascript object literal , and it can be treated as such.
for(var i = 0; i < jsonLines.length; i++){
var innerArray = jsonLines[i];
for(var j = 0; j < innerArray.length; j++){
var obj = innerArray[j];
//now you can use obj.x, obj.y etc...
}
}
JSON is heavily based off JavaScript object literals so when it is in actual code and not in a string/text file, it is actually a JavaScript object.
You can break-down the object like so
//An Array of...
[
//Arrays of
[
//JavaScript Object Literals
{"x":"275","y":"231"},
{"x":"124","y":"237"}
],
[{"x":"201","y":"157"},{"x":"275","y":"231"}],
[{"x":"215","y":"307"},{"x":"201","y":"157"}],
[{"x":"342","y":"188"},{"x":"215","y":"307"}]
]
Also worth nothing that JavaScript Object property names can be strings
var obj1 = {
a : "someValue"
}
var obj2 = {
"a" : "someOtherValue"
}
//Both of these objects can access property "a"
obj1.a //someValue
obj2.a //someOtherValue

Related

javascript, for loop defines a dynamic variable name

Folks,
Not sure if eval() or window() is the answer, but I am trying to loop through an array, and create variables for each item in that array dynamically.
My myArray looks like:
['foo','bar','baz']
code:
for (var i = myArray.length - 1; i >= 0; i--) {
var myVar = eval(myArray[i])
};
console.log(foo)
console.log(bar)
console.log(baz)
Is this possible?
I think you could do it by creating parameters in an object maybe?
var myObject = {};
for(var i=0;i<myArray.length;i++) {
myObject[ myArray[i] ];
}
If you don't set them to anything, you'll just have an object with some parameters that are undefined. I'd have to write this myself to be sure though.
You cannot create different "variable names" but you can create different object properties. There are many ways to do whatever it is you're actually trying to accomplish. In your case I would just do
for (var i = myArray.length - 1; i >= 0; i--) {
console.log(eval(myArray[i]));
};
More generally you can create object properties dynamically, which is the type of flexibility you're thinking of.
var result = {};
for (var i = myArray.length - 1; i >= 0; i--) {
result[myArray[i]] = eval(myArray[i]);
};
I'm being a little handwavey since I don't actually understand language theory, but in pure Javascript (including Node) references (i.e. variable names) are happening at a higher level than at runtime. More like at the call stack; you certainly can't manufacture them in your code like you produce objects or arrays. Browsers do actually let you do this anyway though it's terrible practice, via
window['myVarName'] = 'namingCollisionsAreFun';
(per comment)

JavaScript variable assignment?

Looking at the following code, can someone explain how values are passed around in JavaScript.
function loadImages() {
for(var sec in images) {
theme = images[sec];
for(var tsec in theme) {
theme[tsec].img = new Image();
theme[tsec].img.src = 'images/'+theme[tsec].src+'.png';
}
}
}
Then in another functions:
function definitionToSpriteDataMapping() {
var result = {};
for(var definition in blocks) {
var sprite = blocks[definition].sprite;
for(var secnm in images) {
section = images[secnm];
for(var spritenm in section) {
if(sprite == spritenm) {
result[definition] = {};
result[definition].img = section.img;
}
}
}
}
return result;
}
I cut out some code for simplicity sake but its still quite convoluted. Basically there are 2 objects (images & blocks) which are nested key:value pairs. In the first block of code
theme = images[sec];
theme[tsec].img.src = 'images/'+theme[tsec].src+'.png';
In the second line of code there is
section = images[secnm];
result[definition] = {};
result[definition].img = section.img;
There is no .img in "images" before the first block of code where .img is added to "theme". But this seems to be reflected back into "images" as seen in the second block of code. Are all objects like pointers in JavaScript? Will "result" have the same relationship with "blocks" as "theme" has with "images"? What if I remove an element from "theme", will that be reflected in "images"?
Using theme = images[sec] you will indeed create a pointer to that object in memory. So adding img to theme object will as well add img to that image, as they are the same object. So yes, the same goes for result.
Altering, adding or removing properties of an object referenced in such a way will influence the actual object. The same goes for arrays.
If you don't like that behavior, you should clone the object. You can clone a simple object simply by copying all properties:
var original = { name: "James", age: 73, male: true };
var clone = { };
for( var k in original )
clone[ k ] = original[ k ];
But if any property of that original is an array or object itself, it will be a reference. If you don't have any objects or arrays as properties, the above snippet will do fine. Otherwise you should write a clone function and recursively clone every member of the original.
Are all objects like pointers in JavaScript?
Effectively, yes, though I believe it would be more generally stated that in JavaScript an Object is a "reference type".
If var a references an object, and a is assigned to var b, b will get a copy of the reference that a holds, so a and b will both reference the same object data in memory.
Changes made from the a reference are observable from the b reference.
Note that this is still a "by value" assignment, but the value copied is the value of the reference, not the object itself.
The reason you are experiencing this is that objects are passed by reference. There are ways to clone objects. Take a look at this other SO post How do I correctly clone a JavaScript object?
You're altering images[sec][tsec] in both cases, which refers to the very same object in memory. Just doing theme = images[sec] does not make a copy of the object.
A more trivial example of this behaviour is this:
var obj = {};
var obj2 = obj;
obj.a = 123;
obj2.a; // 123

JavaScript object - add property without using eval?

I have a JavaScript object that I'd like to add some properties to, but I don't know what the names of the properties are until runtime.
Can I do this without using eval? If so, how?
var get_params = new Object();
var params = {'name':'john', 'age':'23'}; //actually not known until runtime
for (var i=0, len=params.length; i<len; ++i ){
get_params.p[0] = p[1]; //How can I set p[0] as the object property?
}
}
Since your code example has a malformed array, I will include 2 variations.
Variation 1 (params is an actual object and not an array):
var get_params = {}; // prefer literal over Object constructors.
var params = {'name':'john', 'age':'23'}; // #runtime (as object literal)
for (var key in params){
if(params.hasOwnProperty(key)) { // so we dont copy native props
get_params[key] = params[key];
}
}
Variation 2 (param is an array containing objects):
var get_params = {}; // prefer literal over Object constructors.
var params = [{'name':'john'},{'age':'23'}]; // #runtime (as array literal)
for(var i=0,param;param=params[i];i++) {
for (var key in param){
if(param.hasOwnProperty(key)) {
get_params[key] = param[key];
}
}
}
Enjoy.
You can access objects via object['someKey'] as well.
var get_params = {};
var params = [{'name':'john'}, {'age':'23'}];
for (var i=0,len=params.length; i<len; ++i){
for (var p in params[i]) {
if(params[i].hasOwnProperty(p)) {
get_params[p] = params[i][p];
}
}
}
Ok, that's my third version. I think it will do what I understand you to desire. Kind of convoluted however, and there are probably better formats for your dynamic array. If I understand what you want to do correctly, this should work. Basically, it creates the following object:
get_params = {
name: "john",
age: "23"
}

Use string to access object in Javascript

I have a variable containing a string "Y.Plugin.abcd" and I would like to access an object with the same name...I'm using YUI 3 and attempted the Y.namespace method with no luck.
var nm = "Y.Plugin.abcd";
Y.log(Y.Plugin.abcd); //outputs the correct object
Y.log(Y.namespace(nm)); //outputs an empty object
I'm pretty much looking for any method, YUI or not, to be able to do what is a rather simple task in PHP.
In plain JavaScript, you could probably split your string and then use the subscript notation, as follows:
var nm = "Y.Plugin.abcd";
var nm_array = nm.split('.'); // split the nm string
var obj = window; // set our reference to the global object
for (var i = 0; i < nm_array.length; i++) {
obj = obj[nm_array[i]]; // walk through all the namespaces
}
Y.log(obj); // obj will hold a reference to Y.Plugin.abcd

Remove element from Javascript associative array using array value

I am trying to remove an element from a Javascript associtive array using the value to find it, but I am having trouble. I have tried splice and JQuery's grep method and neither have worked for me. This is what I currently have.
var array_path = new Array();
function bulk_upload(){
var temp_array = new Object();
for (var i = 1; i<8; i++){
temp_array[i] = $('#path' + i).val();
if(temp_array[i]!='' && temp_array[i]!=null){
array_path['path' + i] = $('#path' + i).val();
}
}
process_txt();
}
function process_txt(){
//alert(array_path.indexOf(full_path)); //returns nothing
var removed_element = array_path.splice(getKey(array_path), 1);
//array_path = $.grep(array_path, function(val) { return val != full_path; });
alert(removed_element);//return nothing, just blank alert box
}
function getKey(data) {
for (var prop in data)
return prop;
}
The way to do this is to use the delete operator.
delete array_path[getKey(array_path)]
Some Background Information
In JavaScript, almost everything descends from Object.prototype. JavaScript, being an open and dynamic language allows you to create/modify properties of objects by simple assignment. This is very similar to what an associative array -- a structure that contains keyed values.
Under the hood an array is just an object that descends from Array.prototype with numeric keys and a special property called length. The length property just returns one greater than the highest numeric property. In essence, an Array is an object with different semantics.
If you're wanting an associative array then Array is not the object you want to descend from. You would want to descend directly from Object. There are two ways to do that, you could either use the new operator or an empty object literal. The syntax for both is below:
var o = new Object();
var o = {};
The second is preferred since it's a little bit more concise.
I wrote a blog post about this a while back, have a look if you want a little bit more info.
There is no such thing in JavaScript as an "associative array" per se. The data structure which corresponds to this concept is simply a JavaScript Object.
Of course, a JavaScript Array (like essentially everything in JavaScript) is an Object, but one with additional capabilities. So you can use an Array as a key-value map, but it's really not the correct structure for that.
To remove a key from an Object, you just do something like this:
var myObj = {};
var myKey = "blah";
myObj[myKey] = 1234; // Adds or updates value for "blah" to 1234.
delete myObj[myKey]; // Removes key-value pair for "blah".
Have you tried delete hash.someKey; ?
You can give your object a remove method, or use apply or call to use another object's remove method, if defined.
function myObj(members){
for(var p in members) this[p]= members[p];
}
myObj.prototype.remove= function(val){
for(var p in this){
if(this[p]=== val) delete this[p];
}
return this;
}
myObj.prototype.toString= function(){
var A= [];;
for(var p in this){
if(this.hasOwnProperty(p)){
A.push(p+':'+this[p])
}
}
return '{'+A.join(', ')+'}';
}
var O= new myObj({a: 1, b: 10, c: 100});
alert(O)
O.remove(10);
alert(O)
I'm not psychic, so I can only guess that you wanted to accomplish something like this:
var paths = [];
function getPaths() {
for(var i = 1; i < 8; ++i) {
var value = $('#path' + i).val();
if(value) paths.push(value);
}
}
function process() {
var firstPath = paths.shift();
// do stuff
}
getPaths();
if(paths.length) process();

Categories