XMLデータからhtmlを特定の順番で生成する方法

今回はXMLデータから特定の順番でhtmlを生成する方法を紹介していきたいと思います。

出す順番を決める

まずはXMLからデータを出す順番を決めます。

例として出す順番としてinputのvalueにそれぞれ数字を順番に指定しました。

htmlはクラス名「output_html」の中に出力します。

html

<input type="hidden" id="list" value="111,222,333,444,555">
<ul class="output_html"></ul> 

jQuery

  // inputのval値を取得し、カンマで分割して配列に格納
  var goodsOrder = jQuery("#list").val().split(',');

  // XMLデータ
  var xmlData = '<list>\
    <item>\
    <goods>444</goods>\
    <name>名前4</name>\
    <brand>ブランド4</brand>\
    </item>\
    <item>\
    <goods>111</goods>\
    <name>名前1</name>\
    <brand>ブランド1</brand>\
    </item>\
    <item>\
    <goods>333</goods>\
    <name>名前3</name>\
    <brand>ブランド3</brand>\
    </item>\
    <item>\
    <goods>555</goods>\
    <name>名前5</name>\
    <brand>ブランド5</brand>\
    </item>\
    <item>\
    <goods>222</goods>\
    <name>名前2</name>\
    <brand>ブランド2</brand>\
    </item>\
    </list>';

  var xmlDoc = $.parseXML(xmlData);


  // ソースを生成
  var source = '';
  for (var i = 0; i < goodsOrder.length; i++) {
    var goodsValue = goodsOrder[i];
    var item = $(xmlDoc).find('item:has(goods:contains("' + goodsValue + '"))');
        var goods = item.find('goods').text();  
    var name = item.find('name').text();
    var brand = item.find('brand').text();
          
    source += '<li>\n';
    source += '  <div class="goods">' + goodsValue + '</div>\n';
    source += '  <div class="name">' + name + '</div>\n';
    source += '  <div class="brand">' + brand + '</div>\n';
    source += '</li>\n';
  }

  // 生成したソースを挿入
  jQuery('.output_html').html(source);

まずはさきほど指定したinputのval値を取得してsplitメソッドで分割して配列にします。

XMLデータを取得してinputのval値ごとにhtmlを生成してクラス名「output_html」のなかに出力します。

以上です。