動態嵌套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對象

回答

相關問題