需要在 HTML 表中填充 JSON 数组数据

Question

我有这个 HTML

    <div class="searchresults">
    <div class="result">
        <!-- document ISO number -->
        <h4><a class="published" href="#">ISO 105-A05:1996</a></h4>
        <!-- document title -->
        <p>
            Textiles -- Tests for colour fastness -- Part A05: Instrumental assessment of change in colour for determination of grey scale rating
        </p>
        <h2 class="toggle">More details<span></span></h2>
        <div class="more_details clearfix">
            <table class="table table-striped table-bordered">
                <tr>
                    <th>Edition</th>
                    <th>Stage</th>
                    <th>TC</th>
                    <th>ICS</th>
                    <th>Document available as of</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>90.93</td>
                    <td><a href="#">ISO/TC 38/SC 1</a></td>
                    <td><a href="#">59.080.01</a></td>
                    <td>1996-03-28</td>
                </tr>
            </table>
        </div>  
    </div>  <!--result /--> 
</div>

如果是普通的 JSP，我可以获取列表并迭代 div 并获取这样的结果

    <div class="searchresults">
    <%
    for(List lists:list) {
    %>
    <div class="result">
        <!-- document ISO number -->
        <h4><a class="published" href="#">ISO 105-A05:1996</a></h4>
        <!-- document title -->
        <p>
            Textiles -- Tests for colour fastness -- Part A05: Instrumental assessment of change in colour for determination of grey scale rating
        </p>
        <h2 class="toggle">More details<span></span></h2>
        <div class="more_details clearfix">
            <table class="table table-striped table-bordered">
                <tr>
                    <th>Edition</th>
                    <th>Stage</th>
                    <th>TC</th>
                    <th>ICS</th>
                    <th>Document available as of</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>90.93</td>
                    <td><a href="#">ISO/TC 38/SC 1</a></td>
                    <td><a href="#">59.080.01</a></td>
                    <td>1996-03-28</td>
                </tr>
            </table>
        </div>  
    </div>  <!--result /--> 
    <%
     }
     %>
</div>

但在我的情况下，我正在进行 ajax 调用并获取 JSON 数组如何使用 JSON 数据迭代 div，如上所示并填充表我应该在 ajax 调用成功时调用什么？

Answer 1

在jQuery's website 上很容易找到如何进行 AJAX 调用，所以我将跳过它。我还将假设您将使用 JSON 作为服务器的结果。

您可以做的是使用模板库，我将在此示例中使用handlebars.js。

首先使用一个特殊的脚本标签从上面获取结果 HTML 并将其用作模板。

<script id="results" type="text/x-handlebars-template"> 
 ... notice the double braces ...
       <h4><a class="published" href="#">ISO {{published}}</a></h4>
</script>

用车把的双括号替换所有动态的并且来自您的 AJAX 调用的项目。

现在您将获取 AJAX 结果集并将其放入本地数组中。从您的页面中，获取要添加数据的 html 元素。

  <div id="replacement"></div>

现在遍历本地结果集中的每个项目，并使用项目数据填充您之前设置的模板化变量。继续将模板化的 HTML 元素添加到占位符。完成后，您现在可以将创建的模板设置为替换元素。

// define the source of your template and complie for use.
var source = document.getElementById('results').innerHTML;
var template = Handlebars.compile(source);

// faked AJAX results set  
var resultSet=[ {
  published: '105-A05:1996',
  title: "Textiles -- Tests for colour fastness -- Part A05:
          Instrumental assessment of change in colour for 
          determination of grey scale rating",
  Edition: '1',
  Stage: "90.93",
  TC: 'ISO/TC 38/SC 1',
  ICS: '59.080.01',
  available: '1996-03-28'
}

var appendedHtml = '';
// get the element where you will add your data.
var element = document.getElementById('replacement');    

// iterate over each entry from your data
resultSet.forEach(function(entry) {
  // the entey data now will fill in the templated variables
   var html = template(entry);
   // keep adding the html elements to a placeholder.
   appendedHtml += html
});

// now set the created templates to the replacement element.
element.innerHTML = appendedHtml;

这里有一个working Plunker 供您查看。这应该足以让你振作起来。此解决方案有两个关键，使用模板库进行数据替换并迭代结果以创建同一模板的多个副本。

祝你好运，希望这对一些人有所帮助。