jsで配列の中身をhtmlの任意の場所に入れたい

Question

下記のような配列のidの値と、HTMLの<li class=クラス名>が一致する場所に
配列のdataの値を入れたいと考えております。
また、HTML側の<li>は15個に固定して、配列の中身が13個しかない場合はブランク画像を表示したいです。

考え方や方法などをご教授いただけないでしょうか。

やりたいことは以下になります。

//配列を入れる<li>を作成
for(var classNo =1; classNo < 16; classNo++)
{
    $('#contentsArea ul').append('<li class ="id' + classNo + '"></li>');
}

//入れたい配列
 var listA = [
    { id: 1, data: aaa},
    { id: 2, data: bbb},
    //{ id: 3, data: ccc},
    { id: 4, data: ddd},
    { id: 5, data: eee},
    { id: 6, data: fff},
    { id: 7, data: ggg},
    { id: 8, data: hhh},
    { id: 9, data: iii},
    //{ id: 10, data: jjj},
    { id: 11, data: kkk},
    { id: 12, data: lll},
    { id: 13, data: mmm},
    { id: 14, data: nnn},
    { id: 15, data: ooo}
  ];

<!--生成されるHTML-->
<ul id="contentsArea">
    <li class="id1">aaa</li>
    <li class="id2">bbb</li>
    <li class="id3"><img src="blank.png"></li><!--該当idがなければ'blank.png'を表示-->
    <li class="id4">ddd</li>
    <li class="id5">eee</li>
    <li class="id6">fff</li>
    <li class="id7">ggg</li>
    <li class="id8">hhh</li>
    <li class="id9">iii</li>
    <li class="id10"><img src="blank.png"></li>
    <li class="id11">kkk</li>
    <li class="id12">lll</li>
    <li class="id13">mmm</li>
    <li class="id14">nnn</li>
    <li class="id15">ooo</li>
</ul>

Answer 1

とりあえずおかしなところは想像で補完しています

<script>
$(function(){
  var listA = [
    { id: 1, data: "aaa"},
    { id: 2, data: "bbb"},
    //{ id: 3, data: "ccc"},
    { id: 4, data: "ddd"},
    { id: 5, data: "eee"},
    { id: 6, data: "fff"},
    { id: 7, data: "ggg"},
    { id: 8, data: "hhh"},
    { id: 9, data: "iii"},
    //{ id: 10, data: "jjj"},
    { id: 11, data: "kkk"},
    { id: 12, data: "lll"},
    { id: 13, data: "mmm"},
    { id: 14, data: "nnn"},
    { id: 15, data: "ooo"}
    ];                  
  $('ul#contentsArea li').remove();
  for(var i=1; i<= 15; i++){
    var j=((listA.filter(function(x){return x["id"]==i}))).shift();
    if(j!==undefined){
      $('ul#contentsArea').append($('<li>').attr("class","id"+j.id).text(j.data));
    }else{
      $('ul#contentsArea').append($('<li>').append($('<img>').attr("src","blank.jpg")));
    }
  }
});
</script>
<ul id="contentsArea"></ul>

追記

noで更に分ける場合、ただし前回と違ってidが0から始まっているのはどうしますか？
いまのままだとid=0は無視されます
no:2のidがダブっているのでshiftにより先に設定されたa2~c2の方が取り出されます

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  var listA = [
    { no: 1, id: 0, data: "a1"},
    { no: 1, id: 1, data: "b1"},
    { no: 1, id: 15, data: "c1"},
    { no: 2, id: 0, data: "a2"},
    { no: 2, id: 1, data: "b2"},
    { no: 2, id: 15, data: "c2"},
    { no: 2, id: 0, data: "a3"},
    { no: 2, id: 1, data: "b3"},
    { no: 2, id: 15, data: "c3"},
    ];                  
  $('ul#contentsArea li').remove();
  for(var i=1; i<= 15; i++){
    var j1=((listA.filter(function(x){return x["id"]==i && x["no"]==1}))).shift();
    var j2=((listA.filter(function(x){return x["id"]==i && x["no"]==2}))).shift();
    if(j1!==undefined){
      $('ul#contentsArea').append($('<li>').attr("class","id"+j1.id).text(j1.data));
    }else{
      $('ul#contentsArea').append($('<li>').append($('<img>').attr("src","blank.jpg")));
    }
    if(j2!==undefined){
      $('ul#contentsArea2').append($('<li>').attr("class","id"+j2.id).text(j2.data));
    }else{
      $('ul#contentsArea2').append($('<li>').append($('<img>').attr("src","blank.jpg")));
    }
  }
});
</script>
<ul id="contentsArea"></ul>
<ul id="contentsArea2"></ul>
  

Comments

[sanpei]

ご回答ありがとうございました。
ドンピシャで実現することができました！

まだfilter()で条件を指定して絞りだした後に、
shift()メソッドで先頭要素を削除して詰めている意味が理解できていませんが、
（shft()を外すと値がundefinedになるとか）
これから勉強いたします。

あと、追加の質問で大変恐縮ですが…
この配列を外部jsonで使用し、さらに[id]の値で処理を分けたいと思い、
case文を使用して処理を行おうと考えましたが、
現状スキル不足すぎて下記に収まっています。

さわりだけでもご教授いただけないでしょうか。

---------------
data.json
[
{ no: 1, id: 0, data: "aaa"},
{ no: 1, id: 1, data: "bbb"},
//～省略～
{ no: 1, id: 15, data: "bbb"},

{ no: 2, id: 0, data: "aaa"},
{ no: 2, id: 1, data: "bbb"},
//～省略～
{ no: 2, id: 15, data: "bbb"},

{ no: 2, id: 0, data: "aaa"},
{ no: 2, id: 1, data: "bbb"},
//～省略～
{ no: 2, id: 15, data: bbb}
]
---------------
data.js

$.getJSON(path,function(data)
{
//["no"]が1の時の処理
for(var i =0; i < 15; i++)
{
var jShift = data.filter(function(x){return x["id"] == i && x["no"] == 1});
var j = jShift.shift();

if(j!==undefined)
{
$('ul#contentsArea01').append($('<li>').attr("class","id"+j.id).text(j.data));
}
else
{
$('ul#contentsArea01').append($('<li>').append($('<img>').attr("src","blank.jpg")));
}
}

//["no"]が2の時の処理
for(var i =0; i < 15; i++)
{
var jShift = data.filter(function(x){return x["id"] == i && x["no"] == 2});
var j = jShift.shift();

if(j!==undefined)
{
$('ul#contentsArea02').append($('<li>').attr("class","id"+j.id).text(j.data));
}
else
{
$('ul#contentsArea02').append($('<li>').append($('<img>').attr("src","blank.jpg")));
}
//～省略～

[yambejp]

＞filter()で条件を指定して絞りだした後に、
＞shift()メソッドで先頭要素を削除して

本来上記処理である必要はないのですが、今のデータ構造からすると
必ずしもidがユニークだとは限らないので、念の為idが合致するデータをfilterした後
先頭のデータをとりだしています。（削除しているのではなく先頭をとりだす）
noごとにulを替える処理は追記しておきます

[sanpei]

変数に代入されるshift()の返り値は、取り除かれた先頭値ですね。
失礼いたしました。

追記の処理もありがとうございます！
記述ミス（no2の重複→no3）があり、ご迷惑をおかけしました。
id＝0の件はループを0スタートにして対応しました。
for(var i =0; i < 15; i++)

おかげさまで思い描く処理を実現できました。
感謝申し上げます！

Answer 2

こういう感じとかどうでしょう。（全部は書いていません）

<ul id="contentsArea">
    <li data-id="1"></li>
    <li data-id="2"></li>
    <li data-id="3"></li>
    <li data-id="4"></li>
    <li data-id="5"></li>
    <li data-id="6"></li>
    <li data-id="7"></li>
    <li data-id="8"></li>
    <li data-id="9"></li>
    <li data-id="10"></li>
    <li data-id="11"></li>
    <li data-id="12"></li>
    <li data-id="13"></li>
    <li data-id="14"></li>
    <li data-id="15"></li>
</ul>

//入れたい配列
var listA = [
   { id: 1, data: aaa},
   { id: 2, data: bbb},
   //{ id: 3, data: ccc},
   { id: 4, data: ddd},
   { id: 5, data: eee},
   { id: 6, data: fff},
   { id: 7, data: ggg},
   { id: 8, data: hhh},
   { id: 9, data: iii},
   //{ id: 10, data: jjj},
   { id: 11, data: kkk},
   { id: 12, data: lll},
   { id: 13, data: mmm},
   { id: 14, data: nnn},
   { id: 15, data: ooo}
];
$('#contentsArea ul li').each( function() {
	var $_t = $( this );
	var id = $_t.attr( 'data-id' );
	var data = '<img src="blank.png">';
	
	/* listA から id が同じものを探す */
	/* あったら中身を変数dataに代入 */
	
	$_t.html( data );
} );

Comments

[sanpei]

ご回答ありがとうございました。
HTML5のカスタムデータ属性を初めて知りました。
処理の方法も大変勉強になりました。
これからぜひとも活用させていただきます！