Develop Reference

JSON parsing issue in javascript

I have below result returned from python script
{"a_paget_wilkes": "\/speaker\/a_paget_wilkes.json",
"aaron_clark": "\/speaker\/aaron_clark.json",
"aaron_dunlop": "\/speaker\/aaron_dunlop.json",
"aaron_ernst": "\/speaker\/aaron_ernst.json",
"aaron_hurst": "\/speaker\/aaron_hurst.json",
"abigail_miller": "\/speaker\/abigail_miller.json",
"abner_kauffman": "\/speaker\/abner_kauffman.json"}
So it is pretty well formatted JSON I believe. Javascript variable which has above data is called jsondata. Now in the chrome developer tool console when I try to access key valye pair by typing jsondata. I expect all keys to be listed as suggestion, but it shows me string properties like length, anchor, big, blink etc... instead
I tried even JSON.stringify first and then JSON.parse but still the same!!!
Any idea what is wrong in here?

jsondata is apparently a string containing your JSON, rather than a JavaScript object that would result from parsing your JSON.
To parse it, use JSON.parse.
I tried even JSON.stringify first and then JSON.parse but still the same!!!
JSON.stringify will take you in the wrong direction — it will wrap your entire string in a JSON string — and JSON.parse will only undo the JSON.stringify (recovering your original string), not parse your original string.
You need to call JSON.parse without calling JSON.stringify first.

Simple JSON stays undefined

I have an AJAX call that get's a simple JSON back on success, writing the returned JSON into the variable named data.
The returned JSON has been generated within PHP through:
echo json_encode(array('message'=>0);.
Back in my javascript console I'm logging the output of data with console.log(data);. The output is {"message":0}, which seems correct.
However, if I try to log console.log(data.message); I am getting message: undefined.
What am I doing wrong in accessing this pretty basic JSON object?
I've been reading some articles about how to move through JSON object, e.g. https://www.tutorialspoint.com/json/json_overview.htm but I can't find my mistake.
Hopefully you can point me into the right direction :)
Thank you :)

You have to do JSON.parse(result) first to make it an object, because at the moment you're trying to access message property of a string.
You know there are 2 JSON functions in javascript, right...?
// returns string representation of the object
JSON.stringify(object);
// returns a new object built from the string
JSON.parse(object_stringified);

How can I debug my data in conosle?

I have some react code that renders various panels in the UI.
I'm trying to debug, but when I use console statements to show sportsTopBar.propTypes, for example, it prints [object Object]. When I use JSON.stringify it prints empty.
So how can I debug my structures in the console?
Code snippet provided below. The code can be seen in its entirety in the fiddle.
code snippet
sportsTopBar.propTypes = {
sports-layout: React.PropTypes.string.isRequired,
sportsPanelState: React.PropTypes.object.isRequired,
sports: React.PropTypes.object.isRequired
};
console.log("sportsTopBar.propTypes--->" + sportsTopBar.propTypes);
console.log("sportsTopBar.propTypes--->" + JSON.stringify(sportsTopBar.propTypes));
output
sportsTopBar.propTypes--->[object Object]
sportsTopBar.propTypes--->{}

Problem 1
Syntax error
sports-layout: should be "sports-layout":
Problem 2
You're implicitly casting to string
Your comment on this answer made me realize what all this is about. You want to see what this object looks like in the console, and can't get it to output as expected. So, this line:
console.log("sportsTopBar.propTypes--->" + sportsTopBar.propTypes);
Has the problem of using + to concat the leading string to the value you're wanting to see in the console. This concatentation is causing an implicit cast to string of your object, thus the output of [object Object] where you expected to see the actual object. [object Object] is the toString output of an object.
So to get these logged together in the same output, you need to take advantage of console.log's allowance for multiple parameters:
console.log("sportsTopBar.propTypes--->", sportsTopBar.propTypes);
Notice that what I've done is replace the + with ,. Each will now be logged as given, with no casting done on them.
Problem 3
JSON cannot represent functions
Per JSON.org:
JSON is built on two structures:
A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
I assume that React.PropTypes.string.isRequired is a function. As such, the serialized output of any object with a property that references that function will not contain a representation of that property/method. Further, your object contains only references to that function, so the resulting serialization (after functions are stripped) is the representation of an empty object: {}.

Assigning array to JSON data in URL

I'm trying to assign a JSON array from a URL to a variable. Here's my code:
$.getJSON("tljson.json",function(result){
var items = [];
items.push(result);
});
However, 'alerting' the items only returns
[object Object],[object Object],[object Object],[object Object]
What am I doing wrong?

What you're doing wrong is alerting the result. You have an array of four objects, but alert only shows the default text representation of objects, [object Object]. Convert your data to string yourself before printing. For example, instead of alert(result), you can try alert(JSON.stringify(result)).
Also, alert is ugly, annoying and hard to use; if you can, use console.log() and its friends instead, much easier on the programmer. Check the results in the JavaScript console. (This is under the assumption the alert() was for your own debugging benefit; if it's for users, try doing something in HTML instead.)

It already is a variable, result is the json response that you can access the same way you would if you pushed it to items.

JSON.parse not evaluating JSON strings properly

I am using JSON.parse to parse this JSON string
[{"created_at":"2012-01-24T22:36:21Z","name":"joe","age":42,"updated_at":"2012-01-24T22:36:21Z"}]
However I am simply getting this result as the output:
[object Object]
Which shouldn't be the result. I am using this within the Cappuccino framework. Does anyone know what I am doing wrong here?

[object Object] is what objects display when you call toString on them. It looks like you're taking your result and trying to call obj.toString()
Also, your JSON is an array with one element in it, so to verify that your result is correct, you can access the name property on the [0] index:
obj[0].name // should be "joe".
var text = '[{"created_at":"2012-01-24T22:36:21Z","name":"joe","age":42,"updated_at":"2012-01-24T22:36:21Z"}]';
var obj = JSON.parse(text);
alert(obj[0].name); //alerts joe
DEMO
Or get rid of the array, since it's not really doing much
var text = '{"created_at":"2012-01-24T22:36:21Z","name":"joe","age":42,"updated_at":"2012-01-24T22:36:21Z"}';
var obj = JSON.parse(text);
alert(obj.name); //still joe
DEMO

This is an array because it's in square brackets - [] - remove these and it should work...
Even though this is 'syntactically' correct the parser sees this as an array (which is a type of object) but won't do the work on it the way you'd expect.
Also for future reference:
Try to lint it, and see if your syntax is messed up: http://jsonlint.com/

This is an old subject, but nonetheless, I spent hours trying to figure out what was going on. So, hopefully this will help someone else in the future.
My issue was setting up a simple ajax call, and doing something with the resultset from said ajax call. However, no matter what I did, I couldn't get the json resultset to an object.
I ended up stepping through everything in the debugger window and noticed old code that was no longer active was showing up on the sidebar (dom detail). So, my data had been cached. I cleared the cache, and boom! Everything worked.