Как реализовтаь цикл или рекурсивнуый метод в JS так, чтобы из значений HTML элементов вышла такая структура JSON как в примере?
Пример JSON'a:
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name": "Eternal Flame",
"age": 1000000,
"secretIdentity": "Unknown",
"powers": [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
HTML из которого нужно взять данные:
<div class="first">
<div class="second">
<div class="strela"></div><span class="name ">json</span><span class="value"></span>
<div class="btns"><button class="clone">+</button><button class="remove">-</button></div><span
class="type">object</span>
<div class="child">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">squadName</span><span class="value editable"
contenteditable="true">Super hero squad</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">homeTown</span><span class="value editable"
contenteditable="true">Metro City</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed nmbr">
<div class="second">
<div class="strela hide"></div><span class="name ">formed</span><span class="value editable"
contenteditable="true">2016</span>
<div class="btns"></div><span class="type">number</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">secretBase</span><span class="value editable"
contenteditable="true">Super tower</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed bool">
<div class="second">
<div class="strela hide"></div><span class="name ">active</span><span class="value"><input
class="check" type="checkbox"></span>
<div class="btns"></div><span class="type">boolean</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed array">
<div class="second">
<div class="strela"></div><span class="name ">members</span><span class="value"></span>
<div class="btns"></div><span class="type">array</span>
<div class="child" style="">
<div class="first closed obj">
<div class="second">
<div class="strela"></div><span class="name ">0</span><span class="value"></span>
<div class="btns"><button class="clone">+</button><button class="remove">-</button>
</div>
<span class="type">object</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">name</span><span
class="value editable" contenteditable="true">Molecule Man</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed nmbr">
<div class="second">
<div class="strela hide"></div><span class="name ">age</span><span
class="value editable" contenteditable="true">29</span>
<div class="btns"></div><span class="type">number</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span
class="name ">secretIdentity</span><span class="value editable"
contenteditable="true">Dan
Jukes</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed array">
<div class="second">
<div class="strela"></div><span class="name ">powers</span><span
class="value"></span>
<div class="btns"></div><span class="type">array</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">0</span><span
class="value editable" contenteditable="true">Radiation
resistance</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">1</span><span
class="value editable" contenteditable="true">Turning
tiny</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">2</span><span
class="value editable" contenteditable="true">Radiation
blast</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="first closed obj">
<div class="second">
<div class="strela"></div><span class="name ">1</span><span class="value"></span>
<div class="btns"><button class="clone">+</button><button class="remove">-</button>
</div>
<span class="type">object</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">name</span><span
class="value editable" contenteditable="true">Madame
Uppercut</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed nmbr">
<div class="second">
<div class="strela hide"></div><span class="name ">age</span><span
class="value editable" contenteditable="true">39</span>
<div class="btns"></div><span class="type">number</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span
class="name ">secretIdentity</span><span class="value editable"
contenteditable="true">Jane
Wilson</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed array">
<div class="second">
<div class="strela"></div><span class="name ">powers</span><span
class="value"></span>
<div class="btns"></div><span class="type">array</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">0</span><span
class="value editable" contenteditable="true">Million tonne
punch</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">1</span><span
class="value editable" contenteditable="true">Damage
resistance</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">2</span><span
class="value editable" contenteditable="true">Superhuman
reflexes</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="first closed obj">
<div class="second">
<div class="strela"></div><span class="name ">2</span><span class="value"></span>
<div class="btns"><button class="clone">+</button><button class="remove">-</button>
</div>
<span class="type">object</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">name</span><span
class="value editable" contenteditable="true">Eternal
Flame</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed nmbr">
<div class="second">
<div class="strela hide"></div><span class="name ">age</span><span
class="value editable" contenteditable="true">1000000</span>
<div class="btns"></div><span class="type">number</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span
class="name ">secretIdentity</span><span class="value editable"
contenteditable="true">Unknown</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed array">
<div class="second">
<div class="strela"></div><span class="name ">powers</span><span
class="value"></span>
<div class="btns"></div><span class="type">array</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">0</span><span
class="value editable"
contenteditable="true">Immortality</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">1</span><span
class="value editable" contenteditable="true">Heat
Immunity</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">2</span><span
class="value editable" contenteditable="true">Inferno</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">3</span><span
class="value editable"
contenteditable="true">Teleportation</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">4</span><span
class="value editable"
contenteditable="true">Interdimensional
travel</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: Miha
→ Ссылка
Что-то такое?
const domElement = document.querySelector('.first > .second > .child').children;
let array = extractJson(domElement);
let json = JSON.stringify(array);
console.log(json);
function extractJson(dom) {
let json = {};
for (let element of dom) {
let key = element.querySelector('.name').textContent.replace(/\s\s+/g, ' ');
let val = element.querySelector('.value').textContent.replace(/\s\s+/g, ' ');
let classList = element.classList;
if (classList.contains('strg')) {
json[key] = val;
} else if (classList.contains('nmbr')) {
json[key] = parseInt(val);
} else if (classList.contains('bool')) {
let check = element.querySelector('.check');
json[key] = check.checked;
} else if (classList.contains('array')) {
let array = element.querySelector('.child').children;
json[key] = [extractJson(array)];
} else if (classList.contains('obj')) {
let array = element.querySelector('.child').children;
json[key] = extractJson(array);
}
}
return json;
}<div class="first">
<div class="second">
<div class="strela"></div><span class="name ">json</span><span class="value"></span>
<div class="btns"><button class="clone">+</button><button class="remove">-</button></div><span class="type">object</span>
<div class="child">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">squadName</span><span class="value editable" contenteditable="true">Super hero squad</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">homeTown</span><span class="value editable" contenteditable="true">Metro City</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed nmbr">
<div class="second">
<div class="strela hide"></div><span class="name ">formed</span><span class="value editable" contenteditable="true">2016</span>
<div class="btns"></div><span class="type">number</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">secretBase</span><span class="value editable" contenteditable="true">Super tower</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed bool">
<div class="second">
<div class="strela hide"></div><span class="name ">active</span><span class="value"><input
class="check" type="checkbox"></span>
<div class="btns"></div><span class="type">boolean</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed array">
<div class="second">
<div class="strela"></div><span class="name ">members</span><span class="value"></span>
<div class="btns"></div><span class="type">array</span>
<div class="child" style="">
<div class="first closed obj">
<div class="second">
<div class="strela"></div><span class="name ">0</span><span class="value"></span>
<div class="btns"><button class="clone">+</button><button class="remove">-</button>
</div>
<span class="type">object</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">name</span><span class="value editable" contenteditable="true">Molecule Man</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed nmbr">
<div class="second">
<div class="strela hide"></div><span class="name ">age</span><span class="value editable" contenteditable="true">29</span>
<div class="btns"></div><span class="type">number</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">secretIdentity</span><span class="value editable" contenteditable="true">Dan
Jukes</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed array">
<div class="second">
<div class="strela"></div><span class="name ">powers</span><span class="value"></span>
<div class="btns"></div><span class="type">array</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">0</span><span class="value editable" contenteditable="true">Radiation
resistance</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">1</span><span class="value editable" contenteditable="true">Turning
tiny</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">2</span><span class="value editable" contenteditable="true">Radiation
blast</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="first closed obj">
<div class="second">
<div class="strela"></div><span class="name ">1</span><span class="value"></span>
<div class="btns"><button class="clone">+</button><button class="remove">-</button>
</div>
<span class="type">object</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">name</span><span class="value editable" contenteditable="true">Madame
Uppercut</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed nmbr">
<div class="second">
<div class="strela hide"></div><span class="name ">age</span><span class="value editable" contenteditable="true">39</span>
<div class="btns"></div><span class="type">number</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">secretIdentity</span><span class="value editable" contenteditable="true">Jane
Wilson</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed array">
<div class="second">
<div class="strela"></div><span class="name ">powers</span><span class="value"></span>
<div class="btns"></div><span class="type">array</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">0</span><span class="value editable" contenteditable="true">Million tonne
punch</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">1</span><span class="value editable" contenteditable="true">Damage
resistance</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">2</span><span class="value editable" contenteditable="true">Superhuman
reflexes</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="first closed obj">
<div class="second">
<div class="strela"></div><span class="name ">2</span><span class="value"></span>
<div class="btns"><button class="clone">+</button><button class="remove">-</button>
</div>
<span class="type">object</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">name</span><span class="value editable" contenteditable="true">Eternal
Flame</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed nmbr">
<div class="second">
<div class="strela hide"></div><span class="name ">age</span><span class="value editable" contenteditable="true">1000000</span>
<div class="btns"></div><span class="type">number</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">secretIdentity</span><span class="value editable" contenteditable="true">Unknown</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed array">
<div class="second">
<div class="strela"></div><span class="name ">powers</span><span class="value"></span>
<div class="btns"></div><span class="type">array</span>
<div class="child" style="">
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">0</span><span class="value editable" contenteditable="true">Immortality</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">1</span><span class="value editable" contenteditable="true">Heat
Immunity</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">2</span><span class="value editable" contenteditable="true">Inferno</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">3</span><span class="value editable" contenteditable="true">Teleportation</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
<div class="first closed strg">
<div class="second">
<div class="strela hide"></div><span class="name ">4</span><span class="value editable" contenteditable="true">Interdimensional
travel</span>
<div class="btns"></div><span class="type">string</span>
<div class="child" style=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>