Динамический вложенный объект JSON

Question

У меня есть динамические divs на странице, которая имела бы присвоенный класс из набора значений. Например:

<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 я пытаюсь построить динамический объект JSON на основе класса DIV и структуры Я хочу это:

{ 
    class1: { 
     spn1: 'test', 
     spn221: 'test' 
    }, 
    class2: { 
     spn2: 'test another', 
     spn3: 'test123' 
    }, 
    class3: { 
     spn4: 'test223' 
    } 
} 

Я могу добиться этого в плоскую структуру массива но я хочу его в формате JSON, так как я буду выполнять ajax-вызов, основанный на классах div в другой функции. Плоский массив я получаю как (который я не хочу)

[{class:class1,span:spn1,text:test},{class:class1,span:spn221,text:test},...] 

Ссылка на скрипку:https://jsfiddle.net/8v0uove3/

Answer 1

мне удалось получить решение, это ваш желаемый результат? (Посмотрите на выходе консоли)

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>

Answer 2

Вот ваниль 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

Answer 3

Полный список 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 выхода.

Надеюсь, это поможет!