How to display array item inside of JavaScript object using "each in jquery" or "each in javascript"

Question

Here's my code.

var myOwnObject = {
 car1: 'Toyota',
 car2: 'Honda',
 car3: 'BMW',
 car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar']
};
console.log("1. " + myOwnObject.car1 + ", 2. " + myOwnObject.car2 + ", 3. " + myOwnObject.car3 + " , 4. " + myOwnObject.car4[0] + myOwnObject.car4[1]);

What I want to achieve is that I want to display all values especially in array section without calling array one by one.

Thanks.

• Jijo Cleetus: You can use below code for(var key in myOwnObject){ console.log(myOwnObject[key]) }

Answer 1

I'm pretty sure the code you are looking for is about how to display this information dynamically to the page (without having to manually print 1., 2., etc.). Here's a way to do it:

<ol id="sampleSection"></ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var myOwnObject = { car1: 'Toyota', car2: 'Honda', car3: 'BMW', car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar'] };
$.each(myOwnObject, function (index, item) {
 $("<li>")
 .html(item)
 .appendTo($("#sampleSection"));
});
</script>

• Melvin Rey: Hello Nfn, the code are working. Thanks for the Help :)

Answer 2

In plain Javascript, you could get the keys with Object.keys and iterate this array with Array#forEach and check if the property is an array, then join the array, otherwise take the value for output.

var myOwnObject = { car1: 'Toyota', car2: 'Honda', car3: 'BMW', car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar'] };
Object.keys(myOwnObject).forEach(function (k) {
 if (Array.isArray(myOwnObject[k])) {
 console.log(k + ': ' + myOwnObject[k].join(', '));
 } else {
 console.log(k + ': ' + myOwnObject[k]);
 }
});

• Melvin Rey: Hello Nina, The codes are working. Thank you for the help :) Door de manier waarop je bent een aardige programmeur

Answer 3

var myOwnObject = {
 car1: 'Toyota',
 car2: 'Honda',
 car3: 'BMW',
 car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar']
};
var array = $.map(myOwnObject, function(val) {
 return [val];
});
console.log(array.map(function(val, idx) {
 return (idx + 1) + '. ' + (Array.isArray(val) ? val.join(' ') : val);
}).join(', '));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

• Melvin Rey: Hello Rar, The codes are working. Thank you for the help :)

Answer 4

Probably the simplest way to achieve the result you want is to create an helper to flatten your data.

Here you are an example:

function parser(object){
 let results = [];
 for(let let in object){
 let item = object[key];
 if(item instanceof Array){
 item.forEach((el) => { results.push(item)})
 }
 else
 results.push(item)
 }
 return results
}

With your brand-new array you could do anything, such as

let res = parser(object);
let output = '';
res.forEach((item, index) => {
 output = output + index + ". " + item;
})
console.log(output);

Answer 5

In nfn neil's solution he made use of the fact that when arrays are "added" to a string they are converted into a string first, using their built-in method toString().

As your object has members of different types (strings and arrays), this approach works very well. However, if you want to have more control on how to concatenate your arrays then you will have to put in a bit more work:

<ol id="sampleSection"></ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var myOwnObject = { car1: 'Toyota', car2: 'Honda', car3: 'BMW', car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar'] };
$.each(myOwnObject, function (index, item) {
 $("<li>")
 .html($.isArray(item)
 ?item.join('<your separator>') // arrays
 :item) // strings
 .appendTo($("#sampleSection"));
 });
</script>

Instead of the item.join() function you could do an item.map(function(itm,idx){return idx+'. '+itm;}-construct with the possibility of weaving in the index position of each element.

• Melvin Rey: Hello Cars10, the code are working. Thanks for the Help :)