将json平面文件数据动态加载到新的<li>元素中

Question

我正在尝试使用使用json平面文件数据来：

1. 生成新的列表项
2. 在新列表项中填充特定的类。

我的json文件如下所示：

{
  "event": {
    "title": "Title of thing",
    "preface": "Preface for thing",
    "cost": "00",
    "image": "img/image.jpg",
    "source": "website name",
    "tags": [
      "identifier-1",
      "identifier-2"
    ]
  },

  "event": {
    "title": "Title of thing",
    "preface": "Preface for thing",
    "cost": "00",
    "image": "img/image.jpg",
    "source": "website name",
    "tags": [
      "identifier-1",
      "identifier-2"
    ]
  }
}

我希望输出标记如下所示：

<li class="event">
    <div class="top">
        <p class="preface">Preface for thing</p>
        <div class="price"> 
            <div class="money">$</div>
            <div class="cost">00</div>
        </div>
    </div>
    <div class="middle">
        <div class="title">Title of thing</div>
        <img class="image" src="img/image.jpg" />
        <p class="source">website name</span></p>
    </div>
    <div class="bottom">
        <button>view details</button>
    <div>
</li>

最后，问题是，我的javascript如下所示：

<script>    
$.getJSON( "events.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
      // no clue what to put here.
  }).appendTo( "dateCards ul" );
});
</script>

Answer 1

这应该给你一个起点。您需要完成对每个“事件”属性的其余处理

$.each(data, function(i, val){
  var li = $("<li>").addClass("event");
  var top = $("<div>").addClass("top");
  var preface = $("<p>").addClass("preface").text(val.preface);
  var price = 
  $("<div>")
  .addClass("price")
  .append($("<div>").addClass("money").text("$"))
  .append($("<div>").addClass("cost").text(val.cost))
  ;
  //add other elements here
  $(top).append(preface).append(price);
  $(li).append(top);
  //append li to your events container
}); 

更新

您的json数据是不正确的，因为event属性应该是相同的，如下所示：

{
  "event1": {
    //...
  },

  "event2": {
    //...
  }
}

然后，可以将代码简化为如下内容：

​

var events = {
  "event1": {
    "title": "Title of thing",
    "preface": "Preface for thing",
    "cost": "00",
    "image": "img/image.jpg",
    "source": "website name",
    "tags": [
      "identifier-1",
      "identifier-2"
    ]
  },

  "event2": {
    "title": "Title of thing2",
    "preface": "Preface for thing2",
    "cost": "01",
    "image": "img/image.jpg",
    "source": "website name2",
    "tags": [
      "identifier-1",
      "identifier-2"
    ]
  }
};
$.each(events, function( key, val ) {
  var liHtml = '<li class="event">\
      <div class="top">\
          <p class="preface"></p>\
          <div class="price">\
              <div class="money">$</div>\
              <div class="cost"></div>\
          </div>\
      </div>\
      <div class="middle">\
          <div class="title"></div>\
          <img class="image" src="" />\
          <p class="source"></p>\
      </div>\
      <div class="bottom">\
          <button>view details</button>\
      <div>\
  </li>';
	var html = $(liHtml);
    $.each(val, function(propertyName, propertyValue){
  	  switch(propertyName) {
    	case 'image':
      	  $(html).find("." + propertyName).prop("src", propertyValue);
      	  break;
        default:
      	  $(html).find("." + propertyName).text(propertyValue);
      	  break;
      }
    });
  $("#dateCards").append(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dateCards">
</ul>

​

Answer 2

您可以尝试使用模板函数：

​

const _ = new Util();
$.getJSON("events.json", function(data) {
  var template = _.template($('#template_event').html());
  $.each(data, function(key, val) {
    $("ul").append(template(val));
  });
});

function Util() {
  this.template = function(str) {
    var regex = /(<%[=-]{0,1}\s*\w+\s*%>)/g;
    var matches = str.match(regex);
    if (matches) {
      return function(obj) {
        var str2 = str;
        for (var i = 0; i < matches.length; i++) {
          var inner = matches[i].match(/\w+/);
          str2 = str2.replace(matches[i], obj[inner]);
        }
        return str2;
      }
    } else return function() {
      return str
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>

<script type="text/template" id="template_event">
<li class="event">
    <div class="top">
        <p class="preface"><%= preface %></p>
        <div class="price"> 
            <div class="money">$</div>
            <div class="cost"><%= cost %></div>
        </div>
    </div>
    <div class="middle">
        <div class="title"><%= title %></div>
        <img class="image" src="<%= image %>" />
        <p class="source"><%= source %></p>
    </div>
    <div class="bottom">
        <button>view details</button>
    <div>
</li>
</script>

​

其中$('#template_event').html()是输出的标记，而val是key=>value对的组。