具有多个值的键/值对

Question

我一直试图用多个值来解决键/值对。 我想要做的是遍历 div 中的列表，从LI获取值，然后根据它们所在的 div 创建一个键，然后将这些LI附加到另一个带有它们的键的 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

此代码将创建您想要的对象

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

这是小提琴

您现在可以遍历对象并创建您想要的列表。

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。

工作小提琴

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

Answer 5

        var parameters = new[] {
            new KeyValuePair<string, object?>("@param1", obj.param1),
            new KeyValuePair<string, object?>("@param2", obj.param2),
            new KeyValuePair<string, object?>("@param3", obj.param3),
            new KeyValuePair<string, object?>("@param4", obj.param4)
        }