javascript - How to construct Dynamic HTML using rv-each -

i have 2 arrays truck , jobs. have construct list using 2 arrays. looping 2 loops. each element(id) in first array(truck) need loop through second array(jobs) respective job id alone.

for example : id:1 - should contain - thing1,thing2,thing3,thing4 id:2 - should contain - thing5,thing6,thing7,thing8

i need construct dynamic html above list using rv-each or rivets.

here fiddle : http://jsfiddle.net/keshav_1007/wa5osfec/3/

html :

<div id="contentwrap">     <ol rv-each="truck" rv-value="truck.id">         <li rv-each-job="jobs" rv-value="job.id">{ job.job_number }</li>     </ol> </div> 

js :

    $(document).ready(function(){     window.view = rivets.bind($('#contentwrap'),{         truck:[{id:1},                {id:2},                {id:3},                ],         jobs:[             {id:1,job_number:'thing1'},             {id:1,job_number:'thing2'},             {id:1,job_number:'thing3'},             {id:1,job_number:'thing4'},             {id:2,job_number:'thing5'},             {id:2,job_number:'thing6'},             {id:2,job_number:'thing7'},             {id:2,job_number:'thing8'},         ]     }); }); 

now getting items in array. need elements respect first array mentioned in "for example".

help me on this. tried , couldnt make work.

thanks in advance.

take @ this: http://rivetsjs.com/docs/guide/#formatters

i've created (updated) fiddle: http://jsfiddle.net/wa5osfec/7/

html:

use formatter modify returned value rv-each-*. of course can pass value (in case id) want compare.

<li rv-each-job="jobs | compare truck.id" rv-value="job.id">{ job.job_number }</li> 

js:

(be carefull. foreach not thought out. consider not performant on bigger arrays , repeats)

rivets.formatters.compare = function(array, compare) {      var temparr = [];      array.foreach(function(element, index, array) {         if (element.id == compare) {             temparr.push(element);         }     });      console.log(temparr);      return temparr; }