質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.36%

  • JavaScript

    17447questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7078questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • 配列

    545questions

    配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 567

sanpei

score 11

下記のような配列の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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/10 18:26

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

    まだ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")));
    }
    //~省略~

    キャンセル

  • 2017/04/10 19:57

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

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

    キャンセル

  • 2017/04/11 11:11

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

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

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

    キャンセル

+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 );
} );

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/10 18:26

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17447questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7078questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • 配列

    545questions

    配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。