具有多个值的键/值对

Question

我一直在试图用多个值包围键/值对。 我想要做的是遍历div中的列表，从LI s中获取值，然后基于它们所在的div创建一个键，然后使用它们的键将这些LI s附加到另一个div作为标题。我得到一个基本的结果，但我的代码只产生一个结果：每个键的一个值。我想为每个键生成多个值。

我想直到结束就是这样一个对象，但我不知道如何动态地产生与我已经得到了数据：

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

此代码将创建JSON对象，你想

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

，这是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。

但是，由于您可能因某种原因需要此功能，所以字典是一个关键值集。所以如果你有两个或更多的值使用相同的密钥，最后一个将会覆盖先前的值。您应该将每个对象设置为数组数组

$('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>'); 
      } 
     } 
    }) 
})