从对象属性附加 HTML 元素答案

【问题标题】：Append HTML Element from Object Property从对象属性附加 HTML 元素
【发布时间】：2016-10-17 17:44:26
【问题描述】：

我正在编写我的小代码。我想从我的数组对象中附加一些 HTML 元素。这些是我的代码。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <div class="container">
  </div>
</body>
</html>

Javascript

var obj=[
  {
    name: "john",
    phone: "0831",
    tasks:["run","slide"]
  },
  {
    name: "billy",
    phone: "0798",
    tasks: ["swim", "fly", "crawl"]
  }
]

var str="";

for(i=0;i<obj.length;i++){
    str+='<div>';
    str+='<h1>'+obj[i].name+'</h1>';
    str+='<p>'+obj[i].phone+'</p>';
    str+='<ul>'
    str+='<li>'+obj[i].tasks[0]+'</li>';
    str+='<li>'+obj[i].tasks[1]+'</li>';
    str+='<li>'+obj[i].tasks[2]+'</li>';
    str+='</ul>'
    str+='</div>';

    $(".container").html(str);
}

问题

问题是当我想在多个 li 元素上附加 tasks 对象属性时，由于属性数量之间的不同，存在一个未定义的属性。

近期输出

<div class="container">
  <div>
    <h1>john</h1>
    <p>0831</p>
    <ul>
      <li>run</li>
      <li>slide</li>
      <li>undefined</li>
    </ul></div>
  <div>
    <h1>billy</h1>
    <p>0798</p>
    <ul>
      <li>swim</li>
      <li>fly</li>
      <li>crawl</li>
    </ul>
  </div>
</div>

问题

我的问题是如何将 li 元素附加到与对象属性相同的数量，这样就没有我上面提到的未定义属性了？

【问题讨论】：

标签： javascript html javascript-objects

【解决方案1】：

可能是这样

...
str+='<ul>'
for (var ii = 0; ii < obj[i].tasks.length; ii++) {
    str+='<li>'+obj[i].tasks[ii]+'</li>';
}
str+='</ul>'
...

【讨论】：