After performing a JSON parse on a JavaScript object using JSON.parse, I am looking to print the object in order to debug it as there seems to be an issue with the function. When attempting to do so by executing the following code...
for (property in obj) {
output += property + ': ' + obj[property] + '; ';
}
console.log(output);
Instead of seeing the contents, I am getting multiple instances of [object Object]. What is the best way to print this in order to view the actual contents?
Have you ever wondered what JSON stands for? It actually stands for JavaScript Object Notation. This format is great for working with objects.
If you use the code JSON.stringify(obj), it will return a string representation of the object.
Many debugger consoles have the capability to directly display objects. Simply utilize
console.log(obj);
With most debuggers, this will typically show the object in the console as a condensed tree structure. You can expand the tree to closely examine the object.
If you're looking to format your JSON output neatly with proper indentation, you can achieve this using the JSON.stringify method along with its third parameter:
JSON.stringify(value[, replacer[, space]])
For instance:
var data = {name:"John", age:30, city:"New York"};
JSON.stringify(data, null, " ");
or
JSON.stringify(data, null, 4);
will result in the following formatted JSON:
"{
"name": "John",
"age": 30,
"city": "New York"
}"
In a web browser, using console.log(data) will also format the output nicely, but in a terminal console like node.js, it may not.
Instead of using console.log(), give console.dir() a try.
console.dir(obj);
According to MDN, console.dir() is supported by:
If you want to display a JSON parsed object, simply use the following code:
console.log( JSON.stringify(data, null, " ") );Learn about using string formats;
console.log("%s %O", "My Object", obj);
Discover Chrome's Format Specifiers which include;
%s Shows value as a string. %d or %i Displays the value as
an integer. %f Displays the value as a floating point number.%o Displays the value as an expandable DOM element (like in the
Elements panel). %O Shows the value as an expandable JavaScript object. %c Styles the output according to CSS provided.Firefox also offers String Substitions with similar choices.
%o Generates a link to a JavaScript object for inspection.%d or %i Shows an integer, without formatting support yet.%s Displays a string.%f Presents a floating-point value, with no formatting support yet.Safari introduces printf style formatters
%d or %i Integer%[0.N]f Floating-point value with N digits of precision%o Object%s StringShort and sweet:
console.log("item: %O", item)
Simply utilize
console.info("CONSOLE LOG : ")
console.log(response);
console.info("CONSOLE DIR : ")
console.dir(response);
and you'll see this displayed in the Chrome console:
CONSOLE LOG :
facebookSDK_JS.html:56 Object {name: "Diego Matos", id: "10155988777540434"}
facebookSDK_JS.html:57 CONSOLE DIR :
facebookSDK_JS.html:58 Objectid: "10155988777540434"name: "Diego Matos"__proto__: Object
To troubleshoot, consider utilizing console.debug
window.console.debug(jsonObject);
When coding in JavaScript on a server, a little extra effort can make a big difference. I have come up with my own function called ppos (pretty-print-on-server) to help with this:
ppos = (object, space = 2) => JSON.stringify(object, null, space).split('\n').forEach(s => console.log(s));
This function does an excellent job of formatting the output in a way that is easy for me to read when working on server-side code.
Here is a simple function that can alert the contents of an array or object.
Simply call this function with an array, string, or object to view its contents.
The Function
function print_r(printthis, returnoutput) {
var output = '';
if($.isArray(printthis) || typeof(printthis) == 'object') {
for(var i in printthis) {
output += i + ' : ' + print_r(printthis[i], true) + '\n';
}
} else {
output += printthis;
}
if(returnoutput && returnoutput == true) {
return output;
} else {
alert(output);
}
}
Example Usage
var data = [1, 2, 3, 4];
print_r(data);
Here is a code snippet that will show the entire JSON data in an alert box
var dataset= '{"people":[' +
'{"name":"John","surname":"Doe" },' +
'{"name":"Anna","surname":"Smith" },' +
'{"name":"Peter","surname":"Jones" }]}';
json_data = JSON.parse(dataset);
window.alert(JSON.stringify(json_data));
There seems to be a lack of an official method for this, but I took matters into my own hands and created a custom json method for the console object. This makes it easier to print stringified logs:
Understanding non-primitive objects in JavaScript can sometimes feel like delving into quantum mechanics - what you see might not truly reflect the current state due to constant changes.
console.json = console.json || function(argument){
for(var arg=0; arg < arguments.length; ++arg)
console.log( JSON.stringify(arguments[arg], null, 4) )
}
// example usage
console.json( [1,'a', null, {a:1}], {a:[1,2]} )Oftentimes, it's necessary to view an Object in its stringified form because directly logging the raw Object will show a "live" version that constantly changes as the program runs. It won't accurately represent the object's state at the time of logging. For instance:
var foo = {a:1, b:[1,2,3]}
// peeking under the hood
console.log(foo)
// as the program progresses, the observed object is modified
foo.a = 2
foo.b = null
When sending the Json format through PostMan, it looks like this: { "number": 2106887, "date": "09/10/2018", "degree":"BE" "Students": [ { "Branch": "ABK015", "Doc": "NCE", "Description": "Testing", "dni": "10160352 ...
Automating the Window: https://i.sstatic.net/CEKpH.png Issue: Our team recently implemented an authentication process for our staging environment, which requires additional steps during testing. I discovered that 'prompt()' cannot be easily capt ...
Currently working on a basic calculator project coded in HTML, CSS, JS, and PHP. Here is a glimpse of it: The user input retrieval is handled by JS, while the actual calculations and result display are taken care of by PHP. I am striving to clear out the ...
Having multiple triggers with different functionalities: Show or remove a canvas Change the background color of a section Play or pause video when in view Play or pause CSS animation The first two triggers work fine individually, but I am encountering an ...
I'm currently experimenting with HTML5 on Mobile Safari for iOS 6 and I'm curious about executing JavaScript code after a certain amount of time has elapsed. One specific task I am interested in is redirecting to a different page after 60 seconds ...
This is my JSON data: { category1:{ item1:{ "id":"123", "name":"John" }, item2:{ "id":"456", "name":"Lisa" } }, category2:{ item1:{ "id":"789", "n ...
Seeking guidance: I have a good grasp of creating static routes in React, but struggling with dynamic ones. Any explanation or assistance would be greatly appreciated. Imagine two components - one for rendering routes and another as a template for the rout ...
Whenever I tap on the "hamburger icon" in mobile view, the mobile navigation drops down but then quickly slides back up. The code responsible for this behavior is unfamiliar to me, so any assistance would be greatly appreciated. The code I am currently wo ...
I've created a script for generating random moving lines as a background element for my portfolio. While it runs smoothly on its own, I encounter frame drops when combining it with other CSS animations and effects, especially at the beginning (althoug ...
Is there a way to get the actual height of the webpage, not just the browser screen height? I noticed that clientHeight only returns the height of the window! Thank you for your help! ...
I am facing an issue with sorting the results from my NeDB database in my express server. Currently, when I retrieve the whole database, the order of results does not match the database file. I want to sort the results based on one of the timestamps in the ...
I have step cards with input fields on each card. A "Next" button is provided for each card to change the view. However, I need to prevent the "Next" button from functioning if any input fields on the form are left empty. Below is the code snippet: va ...
I'm having an issue with my modal popups where the dialog is rendering 200px to the left and about 100px above its intended position. Just updated jQuery. DevicesRightClickActionsMenuController.prototype.showActionsMenu = function(event) { right ...
Currently working with objective c and facing an issue.. ( { error = 0; newsletter = ( { date = "2015-11-23"; description = "Lorem Ipsum is simply dummy text of the p ...
How can I properly use a switch statement in TypeScript to assign a new variable a value? For example: let name: string switch(index) { case 0: name = "cat" case 1: name = "dog" .... } I keep getting the err ...
Upon deploying my React application on Heroku, I encountered errors in the console. Refused to apply style from 'https://radiant-tor-66940.herokuapp.com/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME ...
I've implemented an event binding on the window object for scroll events. The event gets fired correctly every time I scroll, but I'm facing an issue with my setNavState function (which is actually my setState-function) not updating the state pro ...
The Google Javascript engine v8 has the InternalArray and Array components. While Array is accessible to users, InternalArray is designated for internal use only. What sets these two apart? Are InternalArray and Array essentially the same thing? ...
Looking for some help with my code: export default class Contact extends React.Component { constructor(props) { super(props); this.state = { password: '', redirect: false, username: '' }; ...
I'm facing an issue with converting a String to UTF-8. I've attempted various methods for conversion, but the output is incorrect: String fname = new String(_fnameText.getText().toString().getBytes(UTF8)); String fname = URLEncoder.encode( ...