Question

我有一个for循环，迭代一些JSON数据，对于每个JSON对象，我需要输出一大块HTML，如下所示：

<div class="hotel-result independent">
  <div class="col-xs-12 col-sm-12 col-md-8">
    <div class="hotel-type"><span class="independent">Independent Garage</span></div>
    <h3>Hotel Name</h3>
    <div class="meta-info">
      <span class="distance">
        <i class="fonticon-map-marker"></i>
        1.6 miles from N1 2NL
      </span>
      <span class="telephone hidden-xs">
        <i class="fonticon-telephone2"></i>
        92358023523
      </span>
    </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4">
    <div class="service">Room</div>
      <div class="price-wrap">
        <span class="currency">£</span>
        <span class="price">30.95</span>
        <span class="vat small">inc VAT</span>
      </div>
      <a class="button teal has-icon-right" href="#">
        Book online
        <i class="fonticon-chevron-right"></i>
      </a>
      <a href="" class="button light-grey has-icon-right phone-booking hidden-sm hidden-md hidden-lg">
        Touch to call
        <i class="fonticon-telephone2"></i>
      </a>
    </div>
  </div>
</div>

需要从JSON数据输出酒店名称，距离，邮政编码等元素。

我正在努力找出这样做的最好方法，因为在纯javascript，document.createElement / appendChild等中编写它，似乎很长时间啰嗦，我想知道是否有更好/更清洁的方法？

我在网上找到了其他的例子，但只是在HTML的数量非常小或者不需要将数据传递到输出的HTML的情况下。任何建议都将不胜感激。

------- JSON数据示例-------

[{
  id: 0
  name: Hotel Name
  postcode: N1 2NL
  lat: latitude
  lng: Longitude
  hotel_type: independent 
  room_prices: [
    { id:35235325
      room_type: king
      room_price: 356.0
    }
    { id:23532523
      room_type: single
      room_price: 50.0
    }
  ]
}]

这只是JSON的一个简单示例。

Answer 1

model是你解析的json数组

var pattern, nodes = $();
for(var i=0,size=model.length; i<size; i++){
  pattern = createHotelPattern(model[i]);
  nodes = nodes.add($(pattern));
};

$('#myNodeSelector').append(nodes);

这是模式创建者：

  function createHotelPattern (data) {
    var pattern = [
      '<div class="hotel-result ',
      data.hotel_type,
      '">',
        '<div class="col-xs-12 col-sm-12 col-md-8">',
          '<div class="hotel-type">',
            '<span class="independent">Independent Garage</span>',
          '</div>',
          '<h3>',
            data.name,
          '</h3>',
          '<div class="meta-info">',
            '<span class="distance"> <i class="fonticon-map-marker"></i>',
              '1.6 miles from ', 
              data.postcode,
             '</span>',
            '<span class="telephone hidden-xs"> <i class="fonticon-telephone2"></i>',
              data.phone,
            '</span>',
          '</div>',
        '</div>',
        '<div class="col-xs-12 col-sm-12 col-md-4">',
          '<div class="service">',
            data.currency,
          '</div>',
          '<div class="price-wrap">',
            '<span class="currency">',
              data.room_type,
            '</span>',
            '<span class="price">',
              data.room_price,
            '</span>',
            '<span class="vat small">',
              'inc VAT',
             '</span>',
          '</div>',
          '<a class="button teal has-icon-right" href="#">',
            'Book online',
            '<i class="fonticon-chevron-right"></i>',
          '</a>',
          '<a href="" class="button light-grey has-icon-right phone-booking hidden-sm hidden-md hidden-lg">Touch to call<i class="fonticon-telephone2"></i></a>',
        '</div>',
      '</div>'
    ];

    return pattern.join('');
  }

Answer 2

你可以使用一个名为JSON2HTML的jQuery插件。

查看http://json2html.com/

Answer 3

尝试使用您选择的任何javascript templating engine ...我个人非常喜欢mustache.js

在Javascript / jQuery中使用变量附加大块HTML

3 个答案: