Question

我从数据库中获取了JSON数组对象列表。

这是在当前用户控件的页面加载时向客户端发送的

    var json = new JavaScriptSerializer();
    var jsonList = json.Serialize(mylList);             
    Page.ClientScript.RegisterStartupScript(this.GetType(), "HomeCarouselScript", string.Concat("<script type='text/javascript'> var carouselData = ", jsonList, ";</script>"));

json结构是这样的 json有一组名为Active的对象。每个活动对象都有名为Name，Lastname，Address

的属性

我想在此结构中显示HTML div中的所有对象对于每个存在的对象，我们可以将以下模板添加到主容器中。对于j子列表中的每个现有对象，我试图将其添加到主div容器中。

<div id="maincontainer">
   <div class="item">
         Object.Name
         <div class="subcategory">
            <h4>
              Object.Age
            </h4>
            <p>               
             Object.Address
            </p>
          </div>
     </div>

Answer 1

您可以使用像Mustache或Handlebars这样的HTML模板引擎，并将标记转换为以下内容：

{{#each item}}  
      <div class="item">
        {{Name}}
          <div class="subcategory">
            <h4>
              {{Age}}
            </h4>
            <p>               
              {{Address}}
            </p>
          </div>
      </div>
{{/each}}

动态地将json列表绑定到HTML

1 个答案: