How to display array items in an array

Question

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>

Andrew Larson · Accepted Answer · 2015-03-23 21:20:27Z

2

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

answered Mar 23, 2015 at 21:20

Andrew Larson

4832 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Paul Over a year ago

It is not obvious why he has a two level array. Possibly he needs a flattening step...

Andrew Larson Over a year ago

In the dummy data, it looks to me like each subarray is one user's posts, in which case leaving the arrays unflattened allows any once per user code to be executed in the outer loop. Even if there is nothing to be done in this case, a flattening step doesn't provide any obvious advantage over handling the data as is.

user2947979 Over a year ago

Yeah that did it for me Andrew thanks. I tried flattening the array as Paul suggests on the server side but couldn't get it to work. Cheers folks.

user2947979 Over a year ago

I've had to switch to Paul's suggestion. I probably should have specified that the number of items in the arrays can be any number and not just two as the dummy data shows. So I've had to flatten it on the server side to bring across a simple array.

Andrew Larson Over a year ago

The number of elements in the subarrays shouldn't matter to either solution; what are you seeing?

|

Mohamed Shaaban · Accepted Answer · 2015-03-23 21:37:57Z

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>
 <% } %>

Collectives™ on Stack Overflow

How to display array items in an array

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related