如何显示对象中的所有内容，包括嵌套对象和数组？

Question

I have an object which have nested objects and an array. I'm trying to console.log all the data including the data inside the nested object but failing to do so. The result I'm getting shows all the data except the ones which are objects. I get [Object object] instead of those. What I want is to display everything in the console in a format which is not an object or JSON(like the result below, except I want to display the values of f and g as well).

This is the object:

let data = { 
    a: 'Tesla',
    b: 'Mclaren',
    c: 'Ferrari',
    d: 'Lamborghini',
    e: 'Lotus',
    'f':{ 
        name: 'John',
        'e-mail': 'xyz@example.com',
        phone: '+12345678',
        country: 'USA',
        car: 'Toyota Prius' 
    },
    'g':{ 
        name: 'Sophie',
        'e-mail': 'xyz@example.com',
        phone: '+12345678',
        country: 'UK',
        car: 'Nissan Bluebird' 
    },
    h: 'Volkswagen',
    i: 'Bugatti',
    j:[ 
        '% mileage',
        '% top speed',
        '% suspension',
        '% navigation',
        '% horsepower',
        '% 0-60s' 
    ] 
}

This is the code I tried:

for(var key in data){
    console.log(key + " : " + data[key]);
}

This is the result I'm getting:

a : Tesla
b : Mclaren
c : Ferrari
d : Lamborghini
e : Lotus
f : [object Object]
g : [object Object]
h : Volkswagen
i : Bugatti
j : % mileage,% top speed,% suspension,% navigation,% horsepower,% 0-60s

Answer 1

console.log(JSON.parse(JSON.stringify(data))) :

Chrome and Firefox at least will log a reference to an object if you just console.log(obj) . console.log(JSON.stringify(obj)) is going to convert your object to JSON which isn't an object. console.log(JSON.parse(JSON.stringify(obj))) will convert the JSON back to an object as a separate, isolated reference that will not change.

 let data = { a: 'Tesla', b: 'Mclaren', c: 'Ferrari', d: 'Lamborghini', e: 'Lotus', 'f':{ name: 'John', 'e-mail': 'xyz@example.com', phone: '+12345678', country: 'USA', car: 'Toyota Prius' }, 'g':{ name: 'Sophie', 'e-mail': 'xyz@example.com', phone: '+12345678', country: 'UK', car: 'Nissan Bluebird' }, h: 'Volkswagen', i: 'Bugatti', j:[ '% mileage', '% top speed', '% suspension', '% navigation', '% horsepower', '% 0-60s' ] }; console.log(JSON.parse(JSON.stringify(data)));

Answer 2

You can use:

console.log(JSON.stringify(data));

OR

console.log(data);

Answer 3

If you are in the node environment, you can use the inspect method from the util module: https://nodejs.org/api/util.html#util_util_inspect_object_showhidden_depth_colors

const util = require('util');
console.log(util.inspect(bigObject, false, null, true)) ;

You can also have it log with colours, by setting the last argument to true like the above!

If you are in the browser environment, you can still use the util module, but you will have to use a bundler like webpack or browserify.

Answer 4

If you don't care about the output format console.log(JSON.stringify(data, null, 2)) should work fine

Answer 5

If you iterate through an object that contains object instance then it will be logged as reference.If you want to iterate to throw the object in object use typeof while iterating.If it is object then iterate through the inner object.

Answer 6

 let data = { a: 'Tesla', b: 'Mclaren', c: 'Ferrari', d: 'Lamborghini', e: 'Lotus', 'f':{ name: 'John', 'e-mail': 'xyz@example.com', phone: '+12345678', country: 'USA', car: 'Toyota Prius' }, 'g':{ name: 'Sophie', 'e-mail': 'xyz@example.com', phone: '+12345678', country: 'UK', car: 'Nissan Bluebird' }, h: 'Volkswagen', i: 'Bugatti', j:[ '% mileage', '% top speed', '% suspension', '% navigation', '% horsepower', '% 0-60s' ] } for(var key in data){ console.log(key + ": ", data[key]); }