提问人：Sachith Wickramaarachchi 提问时间：7/31/2019 更新时间：7/31/2019 访问量：288
如何使用 JSON 填充 <li>
How to populate <li> using JSON
问：
在我的 asp Web 应用程序中，我用于填充列表。HtmlGenericControl
aspx 代码：
<div class="col-xs-12" id="displayDiv" runat="server">
<ul id="servicesList" runat="server"></ul>
</div>
从代码背后
private void LoadDisplayOrder()
{
Service service = new Service();
SortItem[] data = service.GetServicesDisplayOrderData();
servicesList.Controls.Clear();
for (int i = 0; i < data.Length; i++)
{
SortItem si = data[i];
using (HtmlGenericControl li = new HtmlGenericControl("li"))
{
li.Attributes.Add("class", "sortable-service-item");
using (HtmlGenericControl spanId = new HtmlGenericControl("span"))
{
using (HtmlGenericControl spanName = new HtmlGenericControl("span"))
{
using (HtmlGenericControl dragHandel = new HtmlGenericControl("span"))
{
spanId.InnerText = si.Id.ToString(CultureInfo.CurrentCulture);
dragHandel.Attributes.Add("class", "drag-handle-container");
dragHandel.InnerHtml = "<i class='fa fa-bars'></i>";
serviceIds.Add(si.Id);
spanId.Attributes.Add("style", "display: none;");
spanName.InnerText = si.Name;
li.Controls.Add(dragHandel);
li.Controls.Add(spanId);
li.Controls.Add(spanName);
servicesList.Controls.Add(li);
}
}
}
}
}
}
这个填充列表没有任何问题。现在我需要使用 javascript 生成相同行为的列表。在上面的代码中，数据是一个带有 和 的数组。我有相同的JSON字符串，如下所示。IdName
{
"Id":1,
"Name":"Doe"
},
{
"Id":2,
"Name":"Smith"
},
{
"Id":3,
"Name":"Jones"
}
我需要使用 Javascript 填充，就像我使用 C# 生成的一样。我该怎么做？如何在生成时使用 javascript 添加属性、样式和类<li><li>HtmlGenericControl<li>
答：
0赞
dvo
7/31/2019
#1
让我们将其分解为不同的步骤：
解析 JSON
我为您的示例 JSON 制作了一个测试字符串，然后调用了内置的 javascript 命令来解析它并将其存储在数组中。（确保您的 JSON 是有效的 JSON 数组 - 用方括号 [ ] 括起来。)
var json = "[ { \"Id\":1, \"Name\":\"Doe\" }, { \"Id\":2, \"Name\":\"Smith\" },
{ \"Id\":3, \"Name\":\"Jones\" } ]";
var obj = JSON.parse(json);
遍历 JSON 数组以向 ul 添加新的 li 元素
通过调用 引用数组中的不同对象。添加 a 以设置array[index].PropertyTextNodeli
var list = document.getElementById('<%= servicesList.ClientID %>');
for (i = 0; i < obj.length; i++) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(obj[i].Name));
list.appendChild(li);
}
设置属性 - 循环
在循环中，您可以非常轻松地设置和其他属性。className
li.className = "myClass";
li.setAttribute("data-id", obj[i].Id);
希望这会有所帮助。
整个测试样品：
var json = "[ { \"Id\":1, \"Name\":\"Doe\" }, { \"Id\":2, \"Name\":\"Smith\" },
{ \"Id\":3, \"Name\":\"Jones\" } ]";
var obj = JSON.parse(json);
var list = document.getElementById('<%= servicesList.ClientID %>');
for (i = 0; i < obj.length; i++) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(obj[i].Name));
li.className = "myClass";
li.setAttribute("data-id", obj[i].Id);
list.appendChild(li);
}
评论