JavaScript- display whole object and specific keys and its value

Question

I am using this code

var obj  =  {   'name':'Some Person Name',
                'country':'Country of Some Person',
                'age':1
            }
var storeVal = Object.keys(obj)

for (var i = 0; i < storeVal.length; i++) {
    var storeLoop = storeVal[i] ;
    document.write('<pre>'+storeLoop+'</pre>');
}

Now I can display the keys of object obj using above code and I also know how to display values of object obj using Object.values(). I want to know how I can display the whole object obj using above for loop and I am not talking about for..in loop. I want to also know how to display the specific key and value,for example if I want to display only name key and its value,how that can be done ? I am only using JavaScript. No jquery.

Answer 1

Here's one way to do it:

var obj  =  {   'name':'Some Person Name',
                'country':'Country of Some Person',
                'age':1
            }
var storeVal = Object.keys(obj)

for (var i = 0; i < storeVal.length; i++) {
    var storeLoop = storeVal[i] + ': ' + obj[storeVal[i]];
    document.write('<pre>'+storeLoop+'</pre>');
}

// Just displaying a certain key:

document.write('<pre>Name: '+obj.name+'</pre>');

Answer 2

I suggest to use variable names which reflects their content, then I suggest to declare all variables first, an not for example inside of a for loop.

For getting the value of a property of an object, you could use one of two syntax as property accessor

object.property     // dot notation
object['property']  // bracket notation

To get a value of the object, you could use

object.name  // 'Some Person Name'

var object = { name: 'Some Person Name', country: 'Country of Some Person', age: 1 },
    keys = Object.keys(object),
    value,
    i, 
    nameKey = 'name';

for (i = 0; i < keys.length; i++) {
    value = object[keys[i]];
    document.write('<pre>' + keys[i] + ': ' + value + '</pre>');
}

document.write('<hr><pre>' + nameKey + ': ' + object[nameKey] + '</pre>');

Answer 3

If it is just for you and you don't really want to output it in the HTML code, you can use console.log(storeVal); and explore the printed object in your browser console.

See more here: https://developer.mozilla.org/en-US/docs/Web/API/Console/log

Answer 4

Use Object.entries() , see MDN-Doc

Basic example:

var obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

Your code:

var obj  =  {   'name':'Some Person Name',
                'country':'Country of Some Person',
                'age':1
            }

Object.entries(obj).forEach(([key, value]) => {
    // Do whatever you like with key and value
});