Output an array of arrays in javascript

Question

I have an array of arrays, each having a series of list items, which I am logging with console.log(jobsList); The output is:

enter image description here

The variable jobsList is created by pushing a bunch of arrays created in a for loop like so:

for (var i=0; i < teamList.length; i++ ) {
  jobDirectory.push(newJob);
} 
jobsList.push(jobDirectory);

We are then sorting the arrays by length like so:

jobsList.sort(function(a,b){
  return a.length < b.length;
});

I need to output each array inside of an unordered list. The desired output is like so:

<h3></h3><ul>//insert list items here</ul>

This would be repeated for every top level array.

$('.row').append(jobsList); throws an error. How do I return all of the arrays inside an unordered list like above?

h3 is not allowed inside ul. You should place it before your h3. — Marwelln
– Marwelln, Commented Feb 23, 2015 at 18:18
As a side note, you can't have anything but <li> elements as children of <ul>, so your <h3> will need a new home. — j08691
– j08691, Commented Feb 23, 2015 at 18:18
Can you post your full code here? And what error is occurring with it? — Chris Pietschmann
– Chris Pietschmann, Commented Feb 23, 2015 at 18:18
of course, that was a typo, but not important to this question — JCHASE11
– JCHASE11, Commented Feb 23, 2015 at 18:18

JuniorCompressor · Accepted Answer · 2015-02-23 18:35:22Z

1

You can use:

for (var i in jobsList)
    $('.row').append($('<ul />').append(jobsList[i]));

The reason your code doesn't work is because jobsList is not an array of elements but an array of array of elements. This way you can add these arrays of elements one by one.

edited Feb 23, 2015 at 18:35

answered Feb 23, 2015 at 18:20

JuniorCompressor

20.1k4 gold badges33 silver badges58 bronze badges

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

3 Comments

JuniorCompressor Over a year ago

In the doc it says jquery accepts a list of elements

JCHASE11 Over a year ago

for (var i in jobsList) { $('.row').append('<ul>' + jobsList[i] + '</ul>'); } results in comma separated list items

JuniorCompressor Over a year ago

Does $('.row').append($('<ul />').append(jobsList[i])); also work?

void · Accepted Answer · 2015-02-23 18:22:30Z

0

Use a combination of forEach and join this way.

jobsList.forEach(function(e){

   $(".container").append("<ul>"+e.join("")+"</ul>");

});

Where container is the class of parent div of ul. If their is no parent of ul then use body instead.

answered Feb 23, 2015 at 18:22

void

36.7k10 gold badges71 silver badges111 bronze badges

Comments

kenorb · Accepted Answer · 2015-02-23 20:05:29Z

0

Please use the following code:

$.each(jobsList, function () {
    var $ul = $('<ul/>');
    var $row = $('.row');

    $.each(this, function () {
        $ul.append($(this));
    });

    $row.append('<h3>some title</h3>')
    $row.append($ul);
});

edited Feb 23, 2015 at 20:05

kenorb

169k95 gold badges712 silver badges796 bronze badges

answered Feb 23, 2015 at 18:31

Joe Fitter

1,3097 silver badges11 bronze badges

1 Comment

JCHASE11 Over a year ago

Had trouble with this, but I like using $.each. Error is: Uncaught TypeError: Cannot read property 'ownerDocument' of undefined

Collectives™ on Stack Overflow

Output an array of arrays in javascript

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related