HTML-Element aus Objekteigenschaft anhängen

Ich arbeite an meinem kleinen Code. Ich möchte ein HTML-Element an mein Array-Objekt anhängen. Das sind meine Codes.HTML-Element aus Objekteigenschaft anhängen

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); 
}

Problem

Das Problem ist, wenn ich Aufgaben Objekteigenschaft anhängen möchten auf mehrere li Element, gibt es eine undefinierte Eigenschaft wegen der unterschiedlichen Eigenschaft Betrag.

Aktuelle Ausgabe

<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>

Frage

Meine Frage ist, wie li Element anhängen den gleichen Betrag wie Objekt-Eigenschaft zu sein, so dass es nicht mehr nicht definierte Eigenschaft, wie ich oben erwähnt?

Quelle

2016-10-17 Billy

Vielleicht gefällt dieses

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

Quelle

2016-10-17 17:48:27 LGSon

Thanks :) Es funktioniert perfekt! – Billy

HTML-Element aus Objekteigenschaft anhängen

Antwort

Verwandte Themen