CODEWITHSUNDEEP
javascriptarraysnode.jsejs
user2947979
user2947979

Reputation: 35

How to display array items in an array

Using Nodejs and ejs on the front end I have sent across an array, which has arrays inside it. However when I loop through and step into the array I'm outputted with the first item in each array rather than all the items in the array of arrays. My question is how to display all these posts? A console log shows all the posts are present just a question of how to extract them.

Below is my dummy data array and below that is a sample of the front end, any help would be grateful.

[ 
    [ 
        { 
            post_created_by: 'supervalue',
            post_created_by_id: 54ecb20852ea734c0598c47b,
            title: 'salmon',
            desc: '3 for 2 fresh sea salmon',
            _id: 5501b88c68e8b5842ece6eb0 
        },
        { 
            post_created_by: 'supervalue',
            post_created_by_id: 54ecb20852ea734c0598c47b,
            title: 'Milkshake',
            desc: 'Avonmore fresh strawberry milkshake 6 pack',
            _id: 5501b8fd68e8b5842ece6eb1 
         } 
    ],
    [ 
        { 
            post_created_by: 'maxol',
            post_created_by_id: 54ecb2cd52ea734c0598c47e,
            title: 'petrol',
            _id: 5501bb9168e8b5842ece6eb6 
        },
        { 
           post_created_by: 'maxol',
           post_created_by_id: 54ecb2cd52ea734c0598c47e,
           title: 'tayto',
           desc: '20 packs for the price of 12',
           _id: 5501bbb168e8b5842ece6eb7 
        } 
    ],
    [ 
        { 
            post_created_by: 'Burkes Shoes',
            post_created_by_id: 5502033d3d108e141dd01e8c,
            title: 'boots',
            desc: 'soccer boots size 5',
            _id: 5502036a3d108e141dd01e8d 
        } 
    ]
]


<% for (var i = 0; i < posts.length; i++) { %>
    <div class="col-xs-8">
        <a href="/busProfileFromUser?busId=<%= posts[i][0].post_created_by_id %>">
            <h5><%= posts[i][0].post_created_by %></h5>
        </a>
    </div>

Upvotes: 0

Views: 235

Answers (2)

Mohamed Shaaban
Mohamed Shaaban

Reputation: 1169

You can flatten the entire array of arrays into a single array using a simple recursive flatten function as follows:

var flattenArray = function(arr) {
    var i,
        l = arr.length,
        flatten = [],
        element,
        __push = [].push
     ;

    for(i = 0 ; i < l ; i++) {
        element = arr[i];

        if(element.constructor === Array) {
            __push.apply(flatten, flattenArray(element));
        } else {
            __push.call(flatten, element);
        }
    }

    return flatten;
};

posts = flattenArray(posts);

Then, use a simple for-loop to iterate over that array

<% for (var i = 0; i < posts.length; i++) { %>
    <div class="col-xs-8">
        <a href="/busProfileFromUser?busId=<%= posts[i].post_created_by_id %>">
            <h5><%= posts[i].post_created_by %></h5>
        </a>
   </div>
 <% } %>

Upvotes: 0

Andrew Larson
Andrew Larson

Reputation: 483

Your code iterates over the outer array, but it only ever looks at the first element (the element at index 0) of the inner arrays. You need to iterate over each of those arrays in turn; a nested for loop is the simplest solution:

for (var i = 0; i < array.length; i++) {
  for (var j = 0; j < array[i].length; j++) {
    // do something with the element at array[i][j]
  }
}

Upvotes: 2

Related Questions