How to retrieve particular data from JSON file using jQuery - javascript

I am trying to read JSON file stored locally in my system using jQuery. I want to get some particular data from that file. Let's suppose the file looks like as below:
{"statements":[{"subject":{"uriString":"A","localNameIdx":-1},
"predicate":{"uriString":"B","localNameIdx":-1},
"object":{"uriString":"C"}}
This is what has been written by Java program. My question is: How can I retrieve the following dataA, B and Cfrom this file using jQuery? My code to read JSON file is:
var arr = [];
$.getJSON("/Users/docs/sample.json", function(data) {
$.each(data.statements, function(i, val) {
arr.push(val);
}
}
The code does not retrieve A, B and C. Could anyone please help me how to get these elements and store them in an array in jQuery. Your help would be very much appreciated.


OK. Bare in mind JSON (JavaScript Object Notation) is just a JavaScript Object, with a funny coat on. So if you have a JSON string, and Jquery, you can use the parseJSON method to rehydrate the string into to the object is really represents.
Such as...
var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );


You should try something like this
$.each(data.statements[0], function(i, v){
// arr.push(v.uriString);
console.log(v.uriString); // will print A B C
});
But, in this case, your object should look like this
var data = {
"statements":[
{
"subject":{"uriString":"A","localNameIdx":-1},
"predicate":{"uriString":"B","localNameIdx":-1},
"object":{"uriString":"C","localNameIdx":-1}
}
] // <-- mising in your question
}; // <-- mising in your question
In your question, I didn't find the closing ]}, I think it was a typo, check this example.


You're only looping through data.statements. This only gives you one item, data.statements.subject, which is {"uriString":"A","localNameIdx":-1}
It appears you want to get the uriString of every item, regardless of how nested that item is. To do this, it'd be easiest to define a recursive function.
function getUriStrings( obj ){
var results = [];
for(var key in obj){
if(key == "uriString"){
results.push(obj[key]);
}
else if(obj[key] != null && typeof obj[key] === 'object'){
results.push.apply(results, getUriStrings(obj[key]));
}
}
return results;
}
Then your code will just be:
var arr = [];
$.getJSON("/Users/docs/sample.json", function(data) {
arr = getUriStrings( data );
}

Related

An alternative to eval() or Function() for a two-dimensional array in Javascript? [duplicate]

Given a string of JSON data, how can I safely turn that string into a JavaScript object?
Obviously I can do this unsafely with something like:
var obj = eval("(" + json + ')');
but that leaves me vulnerable to the JSON string containing other code, which it seems very dangerous to simply eval.

JSON.parse(jsonString) is a pure JavaScript approach so long as you can guarantee a reasonably modern browser.

The jQuery method is now deprecated. Use this method instead:
let jsonObject = JSON.parse(jsonString);
Original answer using deprecated jQuery functionality:
If you're using jQuery just use:
jQuery.parseJSON( jsonString );
It's exactly what you're looking for (see the jQuery documentation).

This answer is for IE < 7, for modern browsers check Jonathan's answer above.
This answer is outdated and Jonathan's answer above (JSON.parse(jsonString)) is now the best answer.
JSON.org has JSON parsers for many languages including four different ones for JavaScript. I believe most people would consider json2.js their goto implementation.

Use the simple code example in "JSON.parse()":
var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
and reversing it:
var str = JSON.stringify(arr);

This seems to be the issue:
An input that is received via Ajax websocket etc, and it will be in String format, but you need to know if it is JSON.parsable. The touble is, if you always run it through JSON.parse, the program MAY continue "successfully" but you'll still see an error thrown in the console with the dreaded "Error: unexpected token 'x'".
var data;
try {
data = JSON.parse(jqxhr.responseText);
} catch (_error) {}
data || (data = {
message: 'Server error, please retry'
});

I'm not sure about other ways to do it but here's how you do it in Prototype (JSON tutorial).
new Ajax.Request('/some_url', {
method:'get',
requestHeaders: {Accept: 'application/json'},
onSuccess: function(transport){
var json = transport.responseText.evalJSON(true);
}
});
Calling evalJSON() with true as the argument sanitizes the incoming string.

If you're using jQuery, you can also use:
$.getJSON(url, function(data) { });
Then you can do things like
data.key1.something
data.key1.something_else
etc.

Just for fun, here is a way using a function:
jsonObject = (new Function('return ' + jsonFormatData))()

$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
The callback is passed the returned data, which will be a JavaScript object or array as defined by the JSON structure and parsed using the $.parseJSON() method.

Using JSON.parse is probably the best way.
Here's an example
var jsonRes = '{ "students" : [' +
'{ "firstName":"Michel" , "lastName":"John" ,"age":18},' +
'{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
'{ "firstName":"James" , "lastName":"Henry","age":15 } ]}';
var studentObject = JSON.parse(jsonRes);

The easiest way using parse() method:
var response = '{"result":true,"count":1}';
var JsonObject= JSON.parse(response);
Then you can get the values of the JSON elements, for example:
var myResponseResult = JsonObject.result;
var myResponseCount = JsonObject.count;
Using jQuery as described in the jQuery.parseJSON() documentation:
JSON.parse(jsonString);

Try using the method with this Data object. ex:Data='{result:true,count:1}'
try {
eval('var obj=' + Data);
console.log(obj.count);
}
catch(e) {
console.log(e.message);
}
This method really helps in Nodejs when you are working with serial port programming

I found a "better" way:
In CoffeeScript:
try data = JSON.parse(jqxhr.responseText)
data ||= { message: 'Server error, please retry' }
In Javascript:
var data;
try {
data = JSON.parse(jqxhr.responseText);
} catch (_error) {}
data || (data = {
message: 'Server error, please retry'
});

JSON parsing is always a pain. If the input is not as expected it throws an error and crashes what you are doing.
You can use the following tiny function to safely parse your input. It always turns an object even if the input is not valid or is already an object which is better for most cases:
JSON.safeParse = function (input, def) {
// Convert null to empty object
if (!input) {
return def || {};
} else if (Object.prototype.toString.call(input) === '[object Object]') {
return input;
}
try {
return JSON.parse(input);
} catch (e) {
return def || {};
}
};

Parse the JSON string with JSON.parse(), and the data becomes a JavaScript object:
JSON.parse(jsonString)
Here, JSON represents to process JSON dataset.
Imagine we received this text from a web server:
'{ "name":"John", "age":30, "city":"New York"}'
To parse into a JSON object:
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
Here obj is the respective JSON object which looks like:
{ "name":"John", "age":30, "city":"New York"}
To fetch a value use the . operator:
obj.name // John
obj.age //30
Convert a JavaScript object into a string with JSON.stringify().

JSON.parse(jsonString);
json.parse will change into object.

JSON.parse() converts any JSON string passed into the function into a JSON object.
To understand it better, press F12 to open "Inspect Element" in your browser and go to the console to write the following commands:
var response = '{"result":true,"count":1}'; //sample json object(string form)
JSON.parse(response); //converts passed string to JSON Object.
Now run the command:
console.log(JSON.parse(response));
You'll get output as an Object {result: true, count: 1}.
In order to use that Object, you can assign it to the variable, maybe obj:
var obj = JSON.parse(response);
By using obj and the dot (.) operator you can access properties of the JSON object.
Try to run the command:
console.log(obj.result);

Official documentation:
The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.
Syntax:
JSON.parse(text[, reviver])
Parameters:
text
: The string to parse as JSON. See the JSON object for a description of JSON syntax.
reviver (optional)
: If a function, this prescribes how the value originally produced by parsing is transformed, before being returned.
Return value
The Object corresponding to the given JSON text.
Exceptions
Throws a SyntaxError exception if the string to parse is not valid JSON.

If we have a string like this:
"{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"
then we can simply use JSON.parse twice to convert this string to a JSON object:
var sampleString = "{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"
var jsonString= JSON.parse(sampleString)
var jsonObject= JSON.parse(jsonString)
And we can extract values from the JSON object using:
// instead of last JSON.parse:
var { status, token } = JSON.parse(jsonString);
The result will be:
status = 1 and token = 65b4352b2dfc4957a09add0ce5714059

Performance
There are already good answer for this question, but I was curious about performance and today 2020.09.21 I conduct tests on MacOs HighSierra 10.13.6 on Chrome v85, Safari v13.1.2 and Firefox v80 for chosen solutions.
Results
eval/Function (A,B,C) approach is fast on Chrome (but for big-deep object N=1000 they crash: "maximum stack call exceed)
eval (A) is fast/medium fast on all browsers
JSON.parse (D,E) are fastest on Safari and Firefox
Details
I perform 4 tests cases:
for small shallow object HERE
for small deep object HERE
for big shallow object HERE
for big deep object HERE
Object used in above tests came from HERE
let obj_ShallowSmall = {
field0: false,
field1: true,
field2: 1,
field3: 0,
field4: null,
field5: [],
field6: {},
field7: "text7",
field8: "text8",
}
let obj_DeepSmall = {
level0: {
level1: {
level2: {
level3: {
level4: {
level5: {
level6: {
level7: {
level8: {
level9: [[[[[[[[[['abc']]]]]]]]]],
}}}}}}}}},
};
let obj_ShallowBig = Array(1000).fill(0).reduce((a,c,i) => (a['field'+i]=getField(i),a) ,{});
let obj_DeepBig = genDeepObject(1000);
// ------------------
// Show objects
// ------------------
console.log('obj_ShallowSmall:',JSON.stringify(obj_ShallowSmall));
console.log('obj_DeepSmall:',JSON.stringify(obj_DeepSmall));
console.log('obj_ShallowBig:',JSON.stringify(obj_ShallowBig));
console.log('obj_DeepBig:',JSON.stringify(obj_DeepBig));
// ------------------
// HELPERS
// ------------------
function getField(k) {
let i=k%10;
if(i==0) return false;
if(i==1) return true;
if(i==2) return k;
if(i==3) return 0;
if(i==4) return null;
if(i==5) return [];
if(i==6) return {};
if(i>=7) return "text"+k;
}
function genDeepObject(N) {
// generate: {level0:{level1:{...levelN: {end:[[[...N-times...['abc']...]]] }}}...}}}
let obj={};
let o=obj;
let arr = [];
let a=arr;
for(let i=0; i<N; i++) {
o['level'+i]={};
o=o['level'+i];
let aa=[];
a.push(aa);
a=aa;
}
a[0]='abc';
o['end']=arr;
return obj;
}
Below snippet presents chosen solutions
// src: https://stackoverflow.com/q/45015/860099
function A(json) {
return eval("(" + json + ')');
}
// https://stackoverflow.com/a/26377600/860099
function B(json) {
return (new Function('return ('+json+')'))()
}
// improved https://stackoverflow.com/a/26377600/860099
function C(json) {
return Function('return ('+json+')')()
}
// src: https://stackoverflow.com/a/5686237/860099
function D(json) {
return JSON.parse(json);
}
// src: https://stackoverflow.com/a/233630/860099
function E(json) {
return $.parseJSON(json)
}
// --------------------
// TEST
// --------------------
let json = '{"a":"abc","b":"123","d":[1,2,3],"e":{"a":1,"b":2,"c":3}}';
[A,B,C,D,E].map(f=> {
console.log(
f.name + ' ' + JSON.stringify(f(json))
)})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This shippet only presents functions used in performance tests - it not perform tests itself!
And here are example results for chrome

Converting the object to JSON, and then parsing it, works for me, like:
JSON.parse(JSON.stringify(object))

The recommended approach to parse JSON in JavaScript is to use JSON.parse()
Background
The JSON API was introduced with ECMAScript 5 and has since been implemented in >99% of browsers by market share.
jQuery once had a $.parseJSON() function, but it was deprecated with jQuery 3.0. In any case, for a long time, it was nothing more than a wrapper around JSON.parse().
Example
const json = '{ "city": "Boston", "population": 500000 }';
const object = JSON.parse(json);
console.log(object.city, object.population);
Browser Compatibility
Is JSON.parse supported by all major browsers?
Pretty much, yes (see reference).

Older question, I know, however nobody notice this solution by using new Function(), an anonymous function that returns the data.
Just an example:
var oData = 'test1:"This is my object",test2:"This is my object"';
if( typeof oData !== 'object' )
try {
oData = (new Function('return {'+oData+'};'))();
}
catch(e) { oData=false; }
if( typeof oData !== 'object' )
{ alert( 'Error in code' ); }
else {
alert( oData.test1 );
alert( oData.test2 );
}
This is a little more safe because it executes inside a function and do not compile in your code directly. So if there is a function declaration inside it, it will not be bound to the default window object.
I use this to 'compile' configuration settings of DOM elements (for example the data attribute) simple and fast.

Summary:
Javascript (both browser and NodeJS) have a built in JSON object. On this Object are 2 convenient methods for dealing with JSON. They are the following:
JSON.parse() Takes JSON as argument, returns JS object
JSON.stringify() Takes JS object as argument returns JSON object
Other applications:
Besides for very conveniently dealing with JSON they have can be used for other means. The combination of both JSON methods allows us to make very easy make deep clones of arrays or objects. For example:
let arr1 = [1, 2, [3 ,4]];
let newArr = arr1.slice();
arr1[2][0] = 'changed';
console.log(newArr); // not a deep clone
let arr2 = [1, 2, [3 ,4]];
let newArrDeepclone = JSON.parse(JSON.stringify(arr2));
arr2[2][0] = 'changed';
console.log(newArrDeepclone); // A deep clone, values unchanged

You also can use reviver function to filter.
var data = JSON.parse(jsonString, function reviver(key, value) {
//your code here to filter
});
For more information read JSON.parse.

Just to the cover parse for different input types
Parse the data with JSON.parse(), and the data becomes a JavaScript object.
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
When using the JSON.parse() on a JSON derived from an array, the method will return a JavaScript array, instead of a JavaScript object.
var myArr = JSON.parse(this.responseText);
console.log(myArr[0]);
Date objects are not allowed in JSON.
For Dates do somthing like this
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
Functions are not allowed in JSON.
If you need to include a function, write it as a string.
var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

Another option
const json = '{ "fruit": "pineapple", "fingers": 10 }'
let j0s,j1s,j2s,j3s
console.log(`{ "${j0s="fruit"}": "${j1s="pineapple"}", "${j2s="fingers"}": ${j3s="10"} }`)

Try this. This one is written in typescript.
export function safeJsonParse(str: string) {
try {
return JSON.parse(str);
} catch (e) {
return str;
}
}

Array with less values than length - null-overhead in json

I'm writing a simple game. It's based on a field that is 32x32 squares. Each square can contain a game element. When an element appears/moves/changes, the server sends a json object containing a 2d array that resembles the whole game field with all it's elements via websockets to all clients.
That is quite a lot of data when sent to multiple clients, multiple times per second.
So I was wondering how I could reduce that.
I thought it would help to remove everything from the big array that the client already received anyways. But if you have something like this:
var gameField = [];
gameField[6][10] = "player1";
console.log(JSON.stringify(gameField));
it converts to:
[null,null,null,null,null,null,[null,null,null,null,null,null,null,null,null,null,"player1"]]
That's really unnecessary overhead.
Couldn't it generate something like this instead?
{"6": {"10":"player1"}}
I'm using node.js for the game server btw.
So how do I reduce the data? Is there maybe a special JSON.stringify method?

You can use an object instead of an array.
var gameField = {};
gameField[6] = gameField[6] || {};
gameField[6][10] = "player1";
console.log(JSON.stringify(gameField));

You can customize the json parsing, by using a replacer function. However the parsing reviver would depend on how the inner objects are recognized. For example, if the inner objects are strings as in the example:
var gameField = [];
gameField[6] = [];
gameField[6][10] = "player1";
function replacer(key,val){
if(val instanceof Array){
return val.reduce((o,el,i)=>{
if(el)o[i] = el;
return o;
},{});
}
return val;
}
var json = JSON.stringify(gameField, replacer);
console.log("JSON: ", json);
function reviver(key,val){
if(typeof val === 'string')
return val;
return Object.keys(val).reduce((arr,k) =>{
arr[k] = val[k];
return arr;
}, [] );
}
gameField = JSON.parse(json, reviver);
console.log("Parsed: ", gameField);

If you want to remove null from the array, use underscore library.
npm install underscore --save
in your file where the related code is there,
var _ = require('underscore');
To remove null just pass
result = _.filter(result, function(item){
return item!= null;
});
result will be an array without any null.

Receive array from php to javascript [duplicate]

Given a string of JSON data, how can I safely turn that string into a JavaScript object?
Obviously I can do this unsafely with something like:
var obj = eval("(" + json + ')');
but that leaves me vulnerable to the JSON string containing other code, which it seems very dangerous to simply eval.

JSON.parse(jsonString) is a pure JavaScript approach so long as you can guarantee a reasonably modern browser.

The jQuery method is now deprecated. Use this method instead:
let jsonObject = JSON.parse(jsonString);
Original answer using deprecated jQuery functionality:
If you're using jQuery just use:
jQuery.parseJSON( jsonString );
It's exactly what you're looking for (see the jQuery documentation).

This answer is for IE < 7, for modern browsers check Jonathan's answer above.
This answer is outdated and Jonathan's answer above (JSON.parse(jsonString)) is now the best answer.
JSON.org has JSON parsers for many languages including four different ones for JavaScript. I believe most people would consider json2.js their goto implementation.

Use the simple code example in "JSON.parse()":
var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
and reversing it:
var str = JSON.stringify(arr);

This seems to be the issue:
An input that is received via Ajax websocket etc, and it will be in String format, but you need to know if it is JSON.parsable. The touble is, if you always run it through JSON.parse, the program MAY continue "successfully" but you'll still see an error thrown in the console with the dreaded "Error: unexpected token 'x'".
var data;
try {
data = JSON.parse(jqxhr.responseText);
} catch (_error) {}
data || (data = {
message: 'Server error, please retry'
});

I'm not sure about other ways to do it but here's how you do it in Prototype (JSON tutorial).
new Ajax.Request('/some_url', {
method:'get',
requestHeaders: {Accept: 'application/json'},
onSuccess: function(transport){
var json = transport.responseText.evalJSON(true);
}
});
Calling evalJSON() with true as the argument sanitizes the incoming string.

If you're using jQuery, you can also use:
$.getJSON(url, function(data) { });
Then you can do things like
data.key1.something
data.key1.something_else
etc.

Just for fun, here is a way using a function:
jsonObject = (new Function('return ' + jsonFormatData))()

$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
The callback is passed the returned data, which will be a JavaScript object or array as defined by the JSON structure and parsed using the $.parseJSON() method.

Using JSON.parse is probably the best way.
Here's an example
var jsonRes = '{ "students" : [' +
'{ "firstName":"Michel" , "lastName":"John" ,"age":18},' +
'{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
'{ "firstName":"James" , "lastName":"Henry","age":15 } ]}';
var studentObject = JSON.parse(jsonRes);

The easiest way using parse() method:
var response = '{"result":true,"count":1}';
var JsonObject= JSON.parse(response);
Then you can get the values of the JSON elements, for example:
var myResponseResult = JsonObject.result;
var myResponseCount = JsonObject.count;
Using jQuery as described in the jQuery.parseJSON() documentation:
JSON.parse(jsonString);

Try using the method with this Data object. ex:Data='{result:true,count:1}'
try {
eval('var obj=' + Data);
console.log(obj.count);
}
catch(e) {
console.log(e.message);
}
This method really helps in Nodejs when you are working with serial port programming

I found a "better" way:
In CoffeeScript:
try data = JSON.parse(jqxhr.responseText)
data ||= { message: 'Server error, please retry' }
In Javascript:
var data;
try {
data = JSON.parse(jqxhr.responseText);
} catch (_error) {}
data || (data = {
message: 'Server error, please retry'
});

JSON parsing is always a pain. If the input is not as expected it throws an error and crashes what you are doing.
You can use the following tiny function to safely parse your input. It always turns an object even if the input is not valid or is already an object which is better for most cases:
JSON.safeParse = function (input, def) {
// Convert null to empty object
if (!input) {
return def || {};
} else if (Object.prototype.toString.call(input) === '[object Object]') {
return input;
}
try {
return JSON.parse(input);
} catch (e) {
return def || {};
}
};

Parse the JSON string with JSON.parse(), and the data becomes a JavaScript object:
JSON.parse(jsonString)
Here, JSON represents to process JSON dataset.
Imagine we received this text from a web server:
'{ "name":"John", "age":30, "city":"New York"}'
To parse into a JSON object:
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
Here obj is the respective JSON object which looks like:
{ "name":"John", "age":30, "city":"New York"}
To fetch a value use the . operator:
obj.name // John
obj.age //30
Convert a JavaScript object into a string with JSON.stringify().

JSON.parse(jsonString);
json.parse will change into object.

JSON.parse() converts any JSON string passed into the function into a JSON object.
To understand it better, press F12 to open "Inspect Element" in your browser and go to the console to write the following commands:
var response = '{"result":true,"count":1}'; //sample json object(string form)
JSON.parse(response); //converts passed string to JSON Object.
Now run the command:
console.log(JSON.parse(response));
You'll get output as an Object {result: true, count: 1}.
In order to use that Object, you can assign it to the variable, maybe obj:
var obj = JSON.parse(response);
By using obj and the dot (.) operator you can access properties of the JSON object.
Try to run the command:
console.log(obj.result);

Official documentation:
The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.
Syntax:
JSON.parse(text[, reviver])
Parameters:
text
: The string to parse as JSON. See the JSON object for a description of JSON syntax.
reviver (optional)
: If a function, this prescribes how the value originally produced by parsing is transformed, before being returned.
Return value
The Object corresponding to the given JSON text.
Exceptions
Throws a SyntaxError exception if the string to parse is not valid JSON.

If we have a string like this:
"{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"
then we can simply use JSON.parse twice to convert this string to a JSON object:
var sampleString = "{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"
var jsonString= JSON.parse(sampleString)
var jsonObject= JSON.parse(jsonString)
And we can extract values from the JSON object using:
// instead of last JSON.parse:
var { status, token } = JSON.parse(jsonString);
The result will be:
status = 1 and token = 65b4352b2dfc4957a09add0ce5714059

Performance
There are already good answer for this question, but I was curious about performance and today 2020.09.21 I conduct tests on MacOs HighSierra 10.13.6 on Chrome v85, Safari v13.1.2 and Firefox v80 for chosen solutions.
Results
eval/Function (A,B,C) approach is fast on Chrome (but for big-deep object N=1000 they crash: "maximum stack call exceed)
eval (A) is fast/medium fast on all browsers
JSON.parse (D,E) are fastest on Safari and Firefox
Details
I perform 4 tests cases:
for small shallow object HERE
for small deep object HERE
for big shallow object HERE
for big deep object HERE
Object used in above tests came from HERE
let obj_ShallowSmall = {
field0: false,
field1: true,
field2: 1,
field3: 0,
field4: null,
field5: [],
field6: {},
field7: "text7",
field8: "text8",
}
let obj_DeepSmall = {
level0: {
level1: {
level2: {
level3: {
level4: {
level5: {
level6: {
level7: {
level8: {
level9: [[[[[[[[[['abc']]]]]]]]]],
}}}}}}}}},
};
let obj_ShallowBig = Array(1000).fill(0).reduce((a,c,i) => (a['field'+i]=getField(i),a) ,{});
let obj_DeepBig = genDeepObject(1000);
// ------------------
// Show objects
// ------------------
console.log('obj_ShallowSmall:',JSON.stringify(obj_ShallowSmall));
console.log('obj_DeepSmall:',JSON.stringify(obj_DeepSmall));
console.log('obj_ShallowBig:',JSON.stringify(obj_ShallowBig));
console.log('obj_DeepBig:',JSON.stringify(obj_DeepBig));
// ------------------
// HELPERS
// ------------------
function getField(k) {
let i=k%10;
if(i==0) return false;
if(i==1) return true;
if(i==2) return k;
if(i==3) return 0;
if(i==4) return null;
if(i==5) return [];
if(i==6) return {};
if(i>=7) return "text"+k;
}
function genDeepObject(N) {
// generate: {level0:{level1:{...levelN: {end:[[[...N-times...['abc']...]]] }}}...}}}
let obj={};
let o=obj;
let arr = [];
let a=arr;
for(let i=0; i<N; i++) {
o['level'+i]={};
o=o['level'+i];
let aa=[];
a.push(aa);
a=aa;
}
a[0]='abc';
o['end']=arr;
return obj;
}
Below snippet presents chosen solutions
// src: https://stackoverflow.com/q/45015/860099
function A(json) {
return eval("(" + json + ')');
}
// https://stackoverflow.com/a/26377600/860099
function B(json) {
return (new Function('return ('+json+')'))()
}
// improved https://stackoverflow.com/a/26377600/860099
function C(json) {
return Function('return ('+json+')')()
}
// src: https://stackoverflow.com/a/5686237/860099
function D(json) {
return JSON.parse(json);
}
// src: https://stackoverflow.com/a/233630/860099
function E(json) {
return $.parseJSON(json)
}
// --------------------
// TEST
// --------------------
let json = '{"a":"abc","b":"123","d":[1,2,3],"e":{"a":1,"b":2,"c":3}}';
[A,B,C,D,E].map(f=> {
console.log(
f.name + ' ' + JSON.stringify(f(json))
)})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This shippet only presents functions used in performance tests - it not perform tests itself!
And here are example results for chrome

Converting the object to JSON, and then parsing it, works for me, like:
JSON.parse(JSON.stringify(object))

The recommended approach to parse JSON in JavaScript is to use JSON.parse()
Background
The JSON API was introduced with ECMAScript 5 and has since been implemented in >99% of browsers by market share.
jQuery once had a $.parseJSON() function, but it was deprecated with jQuery 3.0. In any case, for a long time, it was nothing more than a wrapper around JSON.parse().
Example
const json = '{ "city": "Boston", "population": 500000 }';
const object = JSON.parse(json);
console.log(object.city, object.population);
Browser Compatibility
Is JSON.parse supported by all major browsers?
Pretty much, yes (see reference).

Older question, I know, however nobody notice this solution by using new Function(), an anonymous function that returns the data.
Just an example:
var oData = 'test1:"This is my object",test2:"This is my object"';
if( typeof oData !== 'object' )
try {
oData = (new Function('return {'+oData+'};'))();
}
catch(e) { oData=false; }
if( typeof oData !== 'object' )
{ alert( 'Error in code' ); }
else {
alert( oData.test1 );
alert( oData.test2 );
}
This is a little more safe because it executes inside a function and do not compile in your code directly. So if there is a function declaration inside it, it will not be bound to the default window object.
I use this to 'compile' configuration settings of DOM elements (for example the data attribute) simple and fast.

Summary:
Javascript (both browser and NodeJS) have a built in JSON object. On this Object are 2 convenient methods for dealing with JSON. They are the following:
JSON.parse() Takes JSON as argument, returns JS object
JSON.stringify() Takes JS object as argument returns JSON object
Other applications:
Besides for very conveniently dealing with JSON they have can be used for other means. The combination of both JSON methods allows us to make very easy make deep clones of arrays or objects. For example:
let arr1 = [1, 2, [3 ,4]];
let newArr = arr1.slice();
arr1[2][0] = 'changed';
console.log(newArr); // not a deep clone
let arr2 = [1, 2, [3 ,4]];
let newArrDeepclone = JSON.parse(JSON.stringify(arr2));
arr2[2][0] = 'changed';
console.log(newArrDeepclone); // A deep clone, values unchanged

You also can use reviver function to filter.
var data = JSON.parse(jsonString, function reviver(key, value) {
//your code here to filter
});
For more information read JSON.parse.

Just to the cover parse for different input types
Parse the data with JSON.parse(), and the data becomes a JavaScript object.
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
When using the JSON.parse() on a JSON derived from an array, the method will return a JavaScript array, instead of a JavaScript object.
var myArr = JSON.parse(this.responseText);
console.log(myArr[0]);
Date objects are not allowed in JSON.
For Dates do somthing like this
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
Functions are not allowed in JSON.
If you need to include a function, write it as a string.
var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

Another option
const json = '{ "fruit": "pineapple", "fingers": 10 }'
let j0s,j1s,j2s,j3s
console.log(`{ "${j0s="fruit"}": "${j1s="pineapple"}", "${j2s="fingers"}": ${j3s="10"} }`)

Try this. This one is written in typescript.
export function safeJsonParse(str: string) {
try {
return JSON.parse(str);
} catch (e) {
return str;
}
}

Find index of object in array by key

I have an array of objects like so
myobj= [{"item1" : info in here},{"item2" : info in here}, {"item3" : info in here}]
I'm trying to modify one, but I only know its key. I need to pinpoint the item1 object so I can change its value (the values are random and I don't know them, so I can't rely upon them).
If I could just get the index of the item it would be pretty easy: myobj[index].value = "newvalue".
Maybe using the index isn't the best way, so if it isn't, I'm open to other ideas.
I was thinking I could try something like
myobj.objectVar
Where objectVar is the key I'm being passed (item1, for example), however this does not work, possibly because it's a variable? Is it possible to use a variable like this maybe?
If it helps, I'm using underscore.js as well.

Your guess at a solution doesn't work because you're not accessing the individual objects, you're accessing an array of objects, each of which has a single property.
To use the data in the format you've got now, you need to iterate over the outer array until you find the object that contains the key you're after, and then modify its value.
myobj= [{"item1" : info in here},{"item2" : info in here}, {"item3" : info in here}]
function setByKey(key, value) {
myObj.forEach(function (obj) {
// only works if your object's values are truthy
if (obj[key]) {
obj[key] = value;
}
});
}
setByKey('item1', 'new value');
Of course, the far better solution is to stop using an array of single-property objects, and just use one object with multiple properties:
myobj= {"item1" : info in here, "item2" : info in here, "item3" : info in here};
Now, you can simply use myObject.item1 = "some new value" and it will work fine.

You can write a function like,
function getElementsHavingKey(key) {
var objectsHavingGivenKey = [];
//loop through all the objects in the array 'myobj'
myobj.forEach(function(individualObject) {
//you can use 'hasOwnProperty' method to find whether the provided key
// is present in the object or not
if(individualObject.hasOwnProperty(key)) {
// if the key is present, store the object having the key
// into the array (many objects may have same key in it)
objectsHavingGivenKey.push(individualObject);
}
});
// return the array containing the objects having the keys
return objectsHavingGivenKey;
}
If you only want to get the index of elements having the given key
You can do something like this,
function getIndexesOfElementsHavingKey(key) {
var objectsHavingGivenKey = [];
//loop through all the objects in the array 'myobj'
myobj.forEach(function(individualObject, index) {
//you can use 'hasOwnProperty' method to find whether the provided key
// is present in the object or not
if(individualObject.hasOwnProperty(key)) {
//push index of element which has the key
objectsHavingGivenKey.push(index);
}
});
// returns the array of element indexes which has the key
return objectsHavingGivenKey;
}

Try this code:
function changeObj( obj, key, newval )
{
for( var i=0, l=obj.length; i<j; i++)
{
if( key in obj[i] )
{
obj[i] = newval;
return;
}
}
}

var myObjArray= [{"item1" : "info in here"},{"item2" : "info in here"}, {"item3" : "info in here"}]
To find and add new value to the object inside an array:
myObjArray.forEach(function(obj) {
for(var key in obj) {
// in case you're matching key & value
if(key === "item1") {
obj[key] = "update value";
// you can even set new property as well
obj.newkey = "New value";
}
}
});

You can access objects the same using their index, even the object inside the original object.
Is this kind of what your looking for:
var otherObj = [{"oitem":"oValue"}];
var myobj= [{"item1" : otherObj},{"item2" : "2"}, {"item3" : "tesT"}];
myobj[0].item1[0].oitem = "newvalue";
alert(myobj[0].item1[0].oitem);

How to implement such an associative array?

arr[key] = value;
where key is a jQuery object and value is an array.

Associative arrays don't really exist in JavaScript. However, you can achieve similar functionality using JavaScript objects:
// Create object
var myObject = {
key: value,
helloText: "Hello World!"
};
// Access object in some statement via:
myObject.helloText
// ...or:
myObject["helloText"]
To use an object as a key, you would have to do something like:
var a = {
helloText: "Hello World!"
};
var b = {};
b[a] = "Testing";
alert(b[a]); // Returns "Testing" (at least, in Safari 4.0.4)
Using an object as a key sounds a bit weird, though. Are you sure you need to do this?
Update:
You can't actually use an object as a key in JavaScript. The reason the above code appears to work is that, in the statement b[a] = "Testing";, JavaScript converts a to a string via a.toString(), which results in "[object Object]", and uses this string as the key. So our statement is actually b["[object Object]"] = "Testing"; and our alert statement is exactly the same as alert(b["[object Object]"]);.
Thanks to CMS for pointing this out in the comments!
Update 2:
Tim Down points out that his JavaScript library jshashtable allows you use an object as a key.

You can use jshashtable, which allows any JavaScript object as a key.

Just guessing here, but it seems you're trying to associate some (arbitrary) data with a jQuery object (possibly an element). In that case, why not use the data () method?
$('#el').data (value);

You can't use objects as keys, and assocative arrays are not what they seem in Javascript because all you're doing is setting a property on the array object, when you loop through by the .length it natively doesn't account for the manually defined properties you set.
I suggest storing the elements and arrays inside of object literals, all inside of an array. Eg:
var list = [
{
el:document.body,
arr:[1,2]
}
];
for ( var i = 0, l = list.length; i<l; ++i ) {
alert( list[i]['el'] )
alert( list[i]['arr'][0] )
}
// add elements to the array
list.push({
el:document.body.firstChild,
arr:[3,4]
})
As kprime mentioned in his answer though, it might be better to use .data() if you are using Javascript.
if ( !$(el).data('key') ) {
$(el).data('key', [2,3,4] );
}

I would suggest assigning a unique ID to each element you want to put in the associative container (object in JS) and use the ID as key:
var idCounter = 0;
var container = { };
function storeValue(element, value) {
if (!element.getAttribute('id')) {
element.setAttribute('id', makeID());
}
var id = element.getAttribute('id');
container[id] = value;
}
function makeID() {
return 'unique-id-' + idCounter++;
}
EDIT: This solution assumes that jQuery is not available. If it is, use data('key', value).

every javascript object is an associative array, this is a property build in the language, you do not need to anything special, just use it like that

Categories

Resources