How to split an array into a multidimensional array?

Question

So I have a JSON feed that returns a list of job titles. I would like the split the parsed data so that they are split into nodes of 3. So for example, right now I am appending all the ones into HTML that looks like:

<div class="slide">
 <div class="jobs-list">
 <a href="#" class="job">Title 1</a>
 <a href="#" class="job">Title 2</a>
 <a href="#" class="job">Title 3</a>
 <a href="#" class="job">Title 4</a>
 <a href="#" class="job">Title 5</a>
 </div>
</div>

I would like the output to look like:

<div class="slide slide1">
 <div class="jobs-list">
 <a href="#" class="job">Title 1</a>
 <a href="#" class="job">Title 2</a>
 <a href="#" class="job">Title 3</a>
 </div>
</div>
<div class="slide slide2">
 <div class="jobs-list">
 <a href="#" class="job">Title 4</a>
 <a href="#" class="job">Title 5</a>
 </div>
</div>

Here is my current JS

$.get('sample-json/9.json', function (data) {
 var data = $.parseJSON(data);
 console.log(data);
 if (data.result.length === 0) {
 alert("No Data. Show Error Screen.");
 } else {
 count = 0;
 count++;
 $("#careers .slides").append('<div class="slide slide' + count + '"></div>');
 $('.slide' + count).append('<div class="jobs-list"></div>');
 $(data.result).each(function (i, d) {
 $('.slide' + count).find(".jobs-list").append(
 '<a class="job cf" href="#">'+ d.type + '</a>');
 });
 }
});

Any pointers on how I should go about doing this?

• user400654: Just iterate over it with a if (index % 3 == 0) which causes it to create a new group to start inserting into on every 3rd item.
• Ruan Mendes: Please show an attempt so we can understand what you're having difficulty with
• Felix Kling: The problem doesn't seem to have anything to do with JSON but with how to process JavaScript arrays.
• Felix Kling: possible duplicate of Partitioning in JavaScript

Answer 1

Do you know the modulo operator? http://en.wikipedia.org/wiki/Modulo_operation

var currentBlock;
jobs.each(function(i, d){
 if(i % 3 == 0){
 //make a new block
 currentBlock = ...
 $("#careers .slides").append(currentBlock)
 }
 // add stuff to the current block
 currentBlock.append(...)
})

Answer 2

If you process your JSON into this HTML structure (similar to what you already did):

<div class="slides">
 <a href="#" class="job">Title 1</a>
 <a href="#" class="job">Title 2</a>
 <a href="#" class="job">Title 3</a>
 <a href="#" class="job">Title 4</a>
 <a href="#" class="job">Title 5</a>
</div>

Then you can manipulate it afterwards into the structure you want, using this JS:

var count = 1;
while ($("div.slides > a.job").length) {
 $("div.slides").append("<div class='slide slide" + count + "'></div>");
 for (var i = 0; i < 3; i++) {
 $("div.slides > a.job:first").appendTo($("div.slide" + count));
 }
 count++;
}
$("div.slide").wrapInner("<div class='jobs-list'></div>");

fiddle: http://jsfiddle.net/Vcjs4/

Answer 3

I was able to solve the problem using a modulus operator.

$.get('sample-json/9.json', function(data) {
 var data = $.parseJSON(data);
 if( data.result.length === 0 ) {
 alert("No Data. Show Error Screen.");
 } else {
 count = 0;
 $( data.result).each(function(i,d){
 if(i % 6 == 0){
 count++;
 $("#careers .slides").append('<div class="slide slide' + count + '"></div>');
 $('.slide' + count).append('<div class="jobs-list"></div>');
 }
 $(".slide" + count).find(".jobs-list").append( 
 '<a class="job cf" href="#" target="_blank">' + d.title + '</a>'
 ); 
 });
 }
});