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: {}.
Related
I fetch an array that is stored in mongoose with ObjectIds. After I output this array through the console I get the following output:
["5a5f7199105cc908e874d74b","5a5f9199105cc908e874d74b"]
At the same time fetch a different object from mongoose. If I output the ObjectId of this object through the console (object.id) I get the following output:
5a5f7199105cc908e874d74b
I try to check whether the value is contained in the array or not. My code looks like this:
myArray.includes(myObject.id)
and I expect to have the result of true. Unfortunately, I get false as a result even though The value is in the array. Maybe it has to deal with the OBject Type? I really do not know how to solve this. Thanks.
Because in case of Array ["5a5f7199105cc908e874d74b","5a5f9199105cc908e874d74b"] - typeof values is String, so you operate with strings, while when you operate with object property(myObject.id) - you, probably, operate with ObjectID, which is default for latest MongoDBs. Anyway, we need to see your code and know your DB version etc. Easiest way to check is run code "typeof myObject.id", and if you see not "string" - this is an answer to your question.
I realy cant understand javascript. Maybe someone can explain me the difference:
validationErrors[value.element.name] = value.method;
console.log(validationErrors);
alert(validationErrors);
console.log(validationErrors) returns well formed array with values, and alert(validationErrors) returns empty array. Why?
The console is more of a debugging environment and can understand the JS objects that are passed in the log function.
Alert on the other hand is a dialog box and will coerce its arguments into string values. Which is why the output is not as well formatted as the console.
Here is a little snippet of what is actually happening in the alert box.
var validationErrors = [ 2, 3, 4 ];
console.log(toString(validationErrors));
Output >> "[object Window]"
It's also best practice to use the console for logging purposes and not the alert box.
you can try this
alert(JSON.stringify(validationErrors));
Alert have some limit according to browser it varies but most You'd probably be best staying under 1000 characters though, as many browsers seem to begin to truncate after 999.
And if you are giving object in alert it will never reflect the values so prefer console for object and other data type can be used in alert but its not a good practice.
console give proper view of data like object in array can be studied easily in console.
Alert is used to print messages, which means it is used to display string values. When you pass anything other than string to alert, it calls .toString function of it and prints the output.
Now why did you get a blank string?
An array is supposed to have indexed values only. So you can do array[index] = "bla bla". But when you do array["something"] = "something else", it adds a property to that array (since arrays are also objects in Javascript).
According to MDN
The toString() method returns a string representing the specified array and its elements.
In simple, it will loop over length of array and join all elements with ,(comma)
But you do not have elements in it. You have set properties. So length is 0 and hence it returns ""
Following is a simulation
var a = [];
a["test"] = "foo";
console.log(a);
console.log(a.toString());
alert({})
Reference
Alert
Array.prototype.toString
All objects in Javascript are passed by reference. So when you passed something to console.log() and it would be changed in code further, in console you will see changed value. On other hand, alert() displays message box and stops code execution, so in message box you see values exactly as they are at alert()'s call time.
For debugging purposes, you may want to use browser's debugger - I recommend Chrome Dev tools. There is free course from codeschool.com to help you discover such great tool: https://www.codeschool.com/courses/discover-devtools
Is the following a bug or a feature in Node.js? If it is a feature, please point out at the spec.
When we call this:
console.log('one\ntwo', 'three\nfour');
we get the expected:
one
two three
four
But if we use a non-string value in front of it, then strings are no longer formatted as expected:
console.log(1, 'one\ntwo', 'three\nfour');
outputs:
1 'one\ntwo' 'three\nfour'
Why is that?
UPDATE
From the link by #MuliYulzary, it would appear that it is supposed to set the formatting, based on whether the first parameter is a string or not.
I found out, that when the first parameter is a string, Node.js uses util.format(parameters), and when the first parameter is not a string, it uses util.inspect.
That's how it works.
From the document console.log, it works correctly
console.log(object [, object, ...])
Logs a debug level message. You pass one or more objects to this method, each of which are evaluated and concatenated into a space-delimited string. The first parameter you pass to console.log() may contain Format Specifiers.
See the sample usage here
When I do
console.log(JSON.stringify(chunks1[1].data)))
This is the log:
"{\"data\":{\"0\":0.00006103515625,\"1\":0.00018310546875,\"2\":0.00018310546875,\"3\":0.0001220703125,\"4\":-0.0003662109375,\"5\":-0.000396728515625,\"6\":-0.000518798828125,\"7\":-0.00054931640625,\"8\":-0.00048828125,...
Now can I access the elements of "data"?
If I do
chunks1[1].data[0]
I get nothing. And
chunks1[1].data.1
Obviously I will get an error.
data is an object. Apart from getting the property with data.propertyName, you can also get it using an array notation, specifying the property name as a string. Like this:
chunks1[1].data['0']
#aduch makes a good point there. There is another 'data' in the output which I overlooked. The object with the numeric properties is actually a subobject, so the correct notation would be:
chunks1[1].data.data['0']
Currently, you are trying to access the elements of data as if it were an array, with numbered indexes, e.g. chunks1[1].data[0].
Instead, because data is an object, you should be using a string index: chunks1[1].data["0"].
And, because in your console.log example, chunks1[1].data is an object containing data as a key, your final accessing scheme should look like:
chunks1[1].data.data["0"]
I searched for this topic, and I can't seem to find the right way to parse the JSON string to read the objects.
Here is my code
$.getJSON("<url>",
function(data) {
alert("success!"+data);
});
outputs:
success![object Object],[object Object],[object Object],[object Object]
Firebug shows correct response, and when I click JSON tab I see all the objects.
Thanks!
When a JSON string is parsed, it is turned into a Javascript object. If you use a string method on an object, the string [object Object] is returned.
You need to use object property access methods instead (e.g. alert(data.somekey);).
Don't use alert() for debugging in cases like this if you have Firebug available. Use console.log(data) and you will get direct insights into your JSON data.
In this case you'd have realized that there's absolutely nothing wrong :D .
JSON = JavaScript Object Notation precisely because it is the way to declare object literals in JavaScript. The data parameter is already a Javascript object (in your case an array of objects) that you can access as:
data[index].fieldname
enter your json string here, and click on the created tree view On the top left you will see how you can access it
link text