CODEWITHSUNDEEP
javascriptjqueryarrays
Melvin Rey
Melvin Rey

Reputation: 147

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

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.

Upvotes: 2

Views: 64

Answers (5)

Carsten Massmann
Carsten Massmann

Reputation: 28196

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.

Upvotes: 0

RaR
RaR

Reputation: 3213

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>

Upvotes: 1

Phugo
Phugo

Reputation: 400

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);

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386654

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]);
    }
});

Upvotes: 1

Neil
Neil

Reputation: 14313

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>

Upvotes: 1

Related Questions