javascriptオブジェクトの値をdivに書き込む

Question

ループオブジェクトやplTitleオブジェクトが存在する場合は、それを使用してトラックオブジェクトから名前の値を書き出す必要があります。私はJavaScriptを使わずにこれをやり遂げるのをやらないように助けてください。しかし、私はあなたの助けが必要なので、それほど良くはありません。

tracks = [{ 
 
    "track": 20, 
 
    "name": "Magus - Smith St. Basement (01/08/04)", 
 
    "length": "05:46", 
 
    "file": "SSB01_08_04_M" 
 
}, { 
 
    "track": 21, 
 
    "name": "Beneath The Painted Eye - Smith St. Basement (06/06/03)", 
 
    "length": "13:08", 
 
    "file": "SSB06_06_03_BTPE" 
 
}]; 
 

 
$('.plItem .plTitle').each(function() { 
 
    var trackName; 
 

 
    for (var key in tracks) { 
 
    trackName = '' 
 
    var obj = tracks[key]; 
 
    naslov = obj.name; 
 
    $(this).replaceWith('<div class="plTitle">' + trackName + '</div>'); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="plwrap"> 
 
    <div class="plItem"> 
 
    <div class="plTitle"></div> 
 
    </div> 
 
    <div class="plItem"> 
 
    <div class="plTitle"></div> 
 
    </div> 
 
</div>

あなたは私に知らせて、追加情報が必要な場合は！

Answer 1

おそらく.eachはここで機能する必要はありません。それは、ここでパラメータだとして あなたは機能と.text()を使用することができます。

$('.plItem .plTitle').text(function(index) { 
    return tracks[index].name; 
}); 

これは要素インデックスの各要素dependetであなたのtracks配列からmoveiのタイトルを書きます。

Example

Answer 2

tracks = [{ 
 
    "track": 20, 
 
    "name": "Magus - Smith St. Basement (01/08/04)", 
 
    "length": "05:46", 
 
    "file": "SSB01_08_04_M" 
 
}, { 
 
    "track": 21, 
 
    "name": "Beneath The Painted Eye - Smith St. Basement (06/06/03)", 
 
    "length": "13:08", 
 
    "file": "SSB06_06_03_BTPE" 
 
}]; 
 

 
var plwrap = document.querySelector(".plwrap"); 
 
var tmplItem = document.getElementById("tmplItem").content; 
 

 
while (plwrap.firstChild) { 
 
    plwrap.removeChild(plwrap.firstChild); 
 
} 
 

 
tracks.forEach(function (track, indice) { 
 
    var newItem = document.importNode(tmplItem, true); 
 
    var plTitle = newItem.querySelector(".plTitle"); 
 
    plTitle.textContent = track.name; 
 
    plwrap.appendChild(plTitle); 
 
});

<template id="tmplItem"> 
 
    <div class="plItem"> 
 
    <div class="plTitle"></div> 
 
    </div> 
 
</template> 
 
<div class="plwrap"> 
 

 
</div>

Answer 3

あなたは近かったが、あなたの変数名は、ビットを台無しにしまいました。

for (var key in tracks) { 
    var obj = tracks[key]; 
    trackName = obj.name; 
    $(this).replaceWith('<div class="plTitle">' + trackName + '</div>'); 
} 

差がnaslov変数はtrackNameに名前を変更したことである。これは、ループ部分のための1つの可能なソリューションです。