我一直试图用多个值包围键/值对。
我要做的是遍历div中的列表,从LI
获取值,然后根据它们所在的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>
答案 0 :(得分: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
您现在可以在对象上循环并创建所需的列表。
答案 1 :(得分:1)
我不清楚为什么你需要这样做。但是下面的方法对你有用。
您要做的是创建一个具有单个对象 band 的对象,该对象又应该包含一个对象数组。因此,您需要构建包含 band 和 musician 属性的对象数组。
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。
答案 2 :(得分:1)
我心中并不是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>
答案 3 :(得分:0)
你不应该从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>');
}
}
})
})
答案 4 :(得分:0)
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)
}