複数の値を持つキー/値のペア

Question

私は、複数の値を持つキー/値のペアの周りを頭で囲んでいます。 私がしようとしているのは、div内のリストを反復して、LIの値を取得し、それらが入っているdivに基づいてキーを作成し、それらのキーを持つ別のdivにそれらのLIを追加しますヘッダーとして。私は基本的な結果を得ていますが、私のコードは1つの結果しか生成していません。私は各キーに複数の値を生成したい。私はで終わるしたい何

は、このようなオブジェクトですが、私は私が持っているデータを使用して動的にそれを生成する方法がわからない：

{ "bands": [ 
    { "band": "beatles", "musician": "john" }, 
    { "band": "beatles", "musician": "paul" }, 
    { "band": "beatles", "musician": "ringo" }, 
    { "band": "beatles", "musician": "george" }, 
    { "band": "stones", "musician": "mick" }, 
    { "band": "stones", "musician": "keith" }, 
    { "band": "stones", "musician": "ronnie" }, 
    { "band": "stones", "musician": "charlie" }, 

] } 

HTML

<button>Click 'em</button> 
<div id="beatles"> 
    <ul> 
    <li>John</li> 
    <li>Paul</li> 
    <li>Ringo</li> 
    <li>George</li> 
    </ul> 
</div> 

<div id="stones"> 
    <ul> 
    <li>Mick</li> 
    <li>Keith</li> 
    <li>Ronnie</li> 
    <li>Charlie</li> 
    </ul> 
</div> 

<div id="beatlesList"> 
    <ul></ul> 
</div> 
<div id="stonesList"> 
    <ul></ul> 
</div> 

JS/JQ

$('button').click(function(){ 
    var $bands = {} 
    $('ul li').each(function(){ 
    var $bandName = $(this).parents('div').attr('id'); 
    var $bandMember = $(this).text(); 
    console.log($bandName); 
    $bands[$bandName] = $bandMember; 
    }) 
    console.log($bands); 
    $.each($bands,function(k,v){ 
    if(k === "beatles") { 
     $('#beatlesList').prepend('<h2>' + k + '</h2>') 
     $('#beatlesList ul').append('<li>' + v + '</li>') 
    } else { 
     $('#stonesList').prepend('<h2>' + k + '</h2>') 
     $('#stonesList ul').append('<li>' + v + '</li>') 
    } 
    }) 
}) 

期待HTML成果

<button>Click 'em</button> 
<div id="beatles"> 
    <ul> 
    <li>John</li> 
    <li>Paul</li> 
    <li>Ringo</li> 
    <li>George</li> 
    </ul> 
</div> 

<div id="stones"> 
    <ul> 
    <li>Mick</li> 
    <li>Keith</li> 
    <li>Ronnie</li> 
    <li>Charlie</li> 
    </ul> 
</div> 

<div id="beatlesList"> 
<h2>beatles</h2> 
    <ul> 
<li>John</li> 
<li>Paul</li> 
<li>Ringo</li> 
<li>George</li> 
</ul> 
</div> 
<div id="stonesList"> 
<h2>stones</h2> 
    <ul> 
<li>Mick</li> 
<li>Keith</li> 
<li>Ronnie</li> 
<li>Charlie</li> 
</ul> 
</div> 

JSFiddle

Answer 1

このコードは、

var $bands = {'bands':[]}; 
    $('ul li').each(function(){ 
    var $bandName = $(this).parents('div').attr('id'); 
    var $bandMember = $(this).text(); 
    console.log($bandName); 

    $bands['bands'].push({'band':$bandName,'musician':$bandMember}); 
    }) 

を望んでいたJSONオブジェクトを作成し、これはあなたがオブジェクトの上に今ループすることができますし、望んでいたリストを作成fiddle

です。

Answer 2

なぜこれを行う必要があるのか​​不明です。しかし、以下のアプローチはあなたのために働くでしょう。

あなたがしたいのは、単一のオブジェクトのバンドを持つオブジェクトを作成し、それはオブジェクトの配列を保持する必要があります。したがって、バンドとミュージシャンプロパティを含むオブジェクトの配列を構築する必要があります。

var $bands = {} 
$bands.bands = []; 
$('ul li').each(function(){ 
    var $bandName = $(this).parents('div').attr('id'); 
    var $bandMember = $(this).text(); 
    $bands.bands.push({band: $bandName, musician: $bandMember}); 
}); 
console.log($bands.bands); 

今$bands.bandsは、オブジェクトの配列を保持し、あなたはforEachをそれらをループ使用することができます。

$bands.bands.forEach(function(object){ 
if(object.band === "beatles") { 
    //$('#beatlesList').prepend('<h2>' + object.band + '</h2>') 
    $('#beatlesList ul').append('<li>' + object.musician + '</li>') 
} else { 
    //$('#stonesList').prepend('<h2>' +object.band+ '</h2>') 
    $('#stonesList ul').append('<li>' + object.musician + '</li>') 
} 

}）;

すべてのオブジェクトの見出しを前に付けたくないので、見出しを追加する行をコメントアウトしました。代わりに、それをhtmlに追加することができます。

Working fiddle

Answer 3

あなたが後にあるものを、私の心の中では100％明確ではありません。私はこれがあなたが試みていると思われることをするだろうと思う。究極的には、クローンとマッサージではなくアイテムを移動させようとしているなら、もちろんこの答えは単純化することができます。もちろん、あなたの要求は完全に間違っている可能性があります。 JSONはこれにどのように要素を投稿しましたか？ JSONの結果を探しているのですか、投稿したHTMLの結果を探していますか、あるいはその両方ですか？

document.getElementById("go").addEventListener("click", function(){ 
 

 
    var sources = Array.from(document.querySelectorAll(".sourceData")); 
 
    sources.forEach(function(item){ 
 
    var target = document.getElementById(item.id + "List"); 
 
    if (!target) { return; } 
 
    
 
    var targetTitle = item.id 
 
    targetTitle = targetTitle.charAt(0).toUpperCase() + targetTitle.slice(1); 
 
    target.querySelector("h2").innerText = targetTitle; 
 

 
    var parent = target.querySelector("ul"); 
 
    var children = Array.from(item.querySelectorAll("li")); 
 
    children.forEach(function(item){ 
 
     var el = document.createElement("li"); 
 
     el.innerText = item.innerText; 
 
     parent.appendChild(el); 
 
    }); 
 
    }); 
 
    
 
});

#beatles, #beatlesList { background-color: aliceblue; } 
 
#stones, #stonesList { background-color: mistyrose; }

<div id="beatles" class="sourceData"> 
 
    <ul> 
 
    <li>John</li> 
 
    <li>Paul</li> 
 
    <li>Ringo</li> 
 
    <li>George</li> 
 
    </ul> 
 
</div> 
 

 
<div id="stones" class="sourceData"> 
 
    <ul> 
 
    <li>Mick</li> 
 
    <li>Keith</li> 
 
    <li>Ronnie</li> 
 
    <li>Charlie</li> 
 
    </ul> 
 
</div> 
 

 
<div id="beatlesList"> 
 
    <h2></h2> 
 
    <ul></ul> 
 
</div> 
 

 
<div id="stonesList"> 
 
    <h2></h2> 
 
    <ul></ul> 
 
</div> 
 

 
<button id="go">Go</button>

Answer 4

あなたはあなたのデータからあなたのhtmlを構築する必要があり、HTMLからデータを構築すべきではありません。

しかし、何らかの理由でこれが必要になる可能性があるため、辞書はキー値のセットです。同じキーを持つ2つ以上の値がある場合、最後に書き込まれた値は前の値を上書きします。各オブジェクトを値の配列として設定する必要があります。

$('button').click(function(){ 
    var $bands = {}; 
    $('ul li').each(function(){ 
     var $bandName = $(this).parents('div').attr('id'); 
     var $bandMember = $(this).text(); 
     console.log($bandName); 

     //if the key doesn't exist create it as an array 
     if($bands[$bandName] == undefined) 
      $bands[$bandName] = []; 
     //add value to array 
     $bands[$bandName].push($bandMember); 
    }) 
    console.log($bands); 
    $.each($bands,function(k,v){ 
     //using k which could be dynamic you could even create the whole thing being dynamic appending new div tags to the body element if they do not exist 
     if(k === "beatles") { 
      $('#beatlesList').prepend('<h2>' + k + '</h2>'); 
      //iterate through each value in array 
      for(var i = 0; i < v.length;i++) { 
       $('#beatlesList ul').append('<li>' + v[i] + '</li>'); 
      }  
     } else { 
      $('#stonesList').prepend('<h2>' + k + '</h2>'); 
      for(var i = 0; i < v.length;i++) { 
       $('#stonesList ul').append('<li>' + v[i] + '</li>'); 
      } 
     } 
    }) 
})