动态嵌套JSON对象

我有会从一堆值anassigned类的网页上的动态的div。例如：动态嵌套JSON对象

<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/

来源

2015-11-30 Saksham

如何获得“平面阵列”？看起来像将数组转换为对象会很容易（例如，_.reduce），这是不可能的？ – phtrivier

@phrivier by _reduce，我可以追加对象吗？你能举一个虚拟的例子吗？ – Saksham

你可以为这个问题创建一个FIDDLE吗？ – Mayank

我已经得到了一个解决方案，这是你想要的结果？（看看控制台输出）

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>

来源

2015-11-30 14:15:55

下面是做这件事的香草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" 
    } 
}

DEMO

来源

2015-11-30 14:28:49 Andy

以下是完整的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输出。

希望它有帮助！

来源

2015-11-30 14:30:35 krishnaxv

动态嵌套JSON对象

回答

相关问题