[英]Dynamic nested JSON object
我在页面上有动态div,该页面上有一堆值分配了一个类。 例如:
<div class='class1'><span class='spn1'>test</span></div>
<div class='class2'><span class='spn2'>test another</span></div>
<div class='class2'><span class='spn3'>test1</span></div>
<div class='class3'><span class='spn4'>test123</span></div>
<div class='class1'><span class='spn221'>test</span></div>
该类可以附加任何随机数。
现在,在我的JavaScript中,我试图基于div的类和我想要的结构构建一个动态JSON对象:
{
class1: {
spn1: 'test',
spn221: 'test'
},
class2: {
spn2: 'test another',
spn3: 'test123'
},
class3: {
spn4: 'test223'
}
}
我能够以平面数组结构实现此功能,但我希望以JSON格式实现,因为我将在其他函数中基于div的类执行ajax调用。 我得到的平面数组是(我不想)
[{class:class1,span:spn1,text:test},{class:class1,span:spn221,text:test},...]
链接到小提琴: https : //jsfiddle.net/8v0uove3/
这是一种普通的JS方式:
// pick up the elements
var divs = document.querySelectorAll('div[class^="class"]');
// use reduce with an initial object
var obj = [].slice.call(divs).reduce(function (p, c) {
var child = c.firstChild;
var key = c.getAttribute('class');
// if the class key doesn't exist in the initial object add it
if (!p[key]) p[key] = {};
// add the new span properties to the object
p[key][child.getAttribute('class')] = child.textContent;
return p;
}, {});
输出量
{
"class1": {
"spn1": "test",
"spn221": "test"
},
"class2": {
"spn2": "test another",
"spn3": "test1"
},
"class3": {
"spn4": "test123"
}
}
这是完整的function
。 这是一个Pure JavaScript
解决方案。 请看下面的代码。
功能
function convertHtmlToJson() { var output = {}, divRef = document.querySelectorAll('div[class^="class"]'), divElem = undefined; for (var i = 0; i < divRef.length; i++) { divElem = divRef[i].getAttribute('class'); // Check if key exists or not if (!output[divElem]) { // output[divElem] === undefined output[divElem] = {} } // Get child element childRef = divRef[i].firstElementChild || divRef.firstChild; var className = document.getElementsByClassName(childRef.getAttribute('class')); for (var j = 0; j < className.length; j++) { output[divElem][className[j].getAttribute('class')] = className[j].textContent; } } return output; }
函数调用
// Final JSON var finalJson = convertHtmlToJson(); // Desired JSON output console.log(JSON.stringify(finalJson));
您可以在浏览器控制台中查看所需的JSON
输出。
希望能帮助到你!
我设法找到了解决方案,这是您想要的结果吗? (看看控制台输出)
var obj = {}; $('div').each(function() { // Get children var children = $(this).children(); // Get current class var current = $(this).attr('class'); // Check if current class already exists in the class object // If not create an empty object if (typeof obj[current] === 'undefined') { obj[current] = {}; } // Iterate over div's children $(children).each(function() { // Get class value of child element var childCls = $(this).attr('class'); // Set the value for child object obj[current][childCls] = $(this).text(); }) }); console.log(obj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='class1'><span class='spn1'>test</span> <span class='spn3'>test</span> </div> <div class='class2'><span class='spn2'>test another</span> </div> <div class='class2'><span class='spn3'>test1</span> </div> <div class='class3'><span class='spn4'>test123</span> </div> <div class='class1'><span class='spn221'>test</span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.