The result of executing the loop in a separate inner_div

Question

I can not post the correct result. There is a JSON file and you need to output this using cycles:

<div class="inner"> <span class="f_text">this 1</span> <span class="f_pos">местоимение 1</span> <span class="f_ts">ðɪs 1</span> <span class="l_text">этот 2</span> <span class="l_pos">местоимение 2</span> </div> <div class="inner"> <span class="f_text">this 1</span> <span class="f_pos">частица 1</span> <span class="f_ts">ðɪs 1</span> <span class="l_text">это 2</span> <span class="l_pos">частица 2</span> </div> <div> <span class="f_text">this 1</span> <span class="f_pos">прилагательное 1</span> <span class="f_ts">ðɪs 1</span> <span class="l_text">настоящий 2</span> <span class="l_pos">прилагательное 2</span> </div>

JSON file:

 { "head": {}, "def": [{ "text": "this", "pos": "местоимение", "ts": "ðɪs", "tr": [{ "text": "этот", "pos": "местоимение", "syn": [{ "text": "такой", "pos": "местоимение" }, { "text": "сей", "pos": "местоимение" }], "mean": [{ "text": "the" }, { "text": "still" }] }] }, { "text": "this", "pos": "частица", "ts": "ðɪs", "tr": [{ "text": "это", "pos": "частица" }] }, { "text": "this", "pos": "прилагательное", "ts": "ðɪs", "tr": [{ "text": "настоящий", "pos": "прилагательное", "syn": [{ "text": "подобный", "pos": "прилагательное" }, { "text": "нынешний", "pos": "прилагательное" }], "mean": [{ "text": "present" }, { "text": "such" }, { "text": "current" }], "ex": [{ "text": "this button", "tr": [{ "text": "настоящая кнопка" }] }] }] }] }

My javascript code is:

 var output = ""; var main_div = document.createElement("div"); main_div.setAttribute('id', "main"); document.body.appendChild(main_div); for (var i = 0; i < info["def"].length; i++) { var inner_div = document.createElement('div'); inner_div.className = "inner"; var res = main_div.appendChild(inner_div); for (var j = 0; j < info["def"][i]["tr"].length; j++) { for (var key in info["def"][i]) { if (info["def"][i].hasOwnProperty(key) && typeof info["def"][i][key] != "object") { output += '<span class=f_' + key + '>' + info["def"][i][key] + " " + ' 1</span>'; } } for (var key2 in info["def"][i]["tr"][j]) { if (info["def"][i]["tr"][j].hasOwnProperty(key2) && typeof info["def"][i]["tr"][j][key2] != "object") { output += '<span class=l_' + key2 + '>' + info["def"][i]["tr"][j][key2] + " " + ' 2</span>'; } } } //for each object res.insertAdjacentHTML('afterBegin', output); }

Grundy grundy 58.6k 7 golden marks 54 silver marks 95 bronze marks · Accepted Answer · 2016-04-01T09:55:12

Your mistake is that after adding the markup, the output is not cleared, so the necessary elements are inserted for the first time, the necessary elements for the second element are added to the second iteration, and the second element is inserted into the second element and for the first and for the second.

A simple solution would be to simply initialize the output an empty string at the beginning of the main loop.

 var info = { "head": {}, "def": [{ "text": "this", "pos": "местоимение", "ts": "ðɪs", "tr": [{ "text": "этот", "pos": "местоимение", "syn": [{ "text": "такой", "pos": "местоимение" }, { "text": "сей", "pos": "местоимение" }], "mean": [{ "text": "the" }, { "text": "still" }] }] }, { "text": "this", "pos": "частица", "ts": "ðɪs", "tr": [{ "text": "это", "pos": "частица" }] }, { "text": "this", "pos": "прилагательное", "ts": "ðɪs", "tr": [{ "text": "настоящий", "pos": "прилагательное", "syn": [{ "text": "подобный", "pos": "прилагательное" }, { "text": "нынешний", "pos": "прилагательное" }], "mean": [{ "text": "present" }, { "text": "such" }, { "text": "current" }], "ex": [{ "text": "this button", "tr": [{ "text": "настоящая кнопка" }] }] }] }] }; var output = ""; var main_div = document.createElement("div"); main_div.setAttribute('id', "main"); document.body.appendChild(main_div); for (var i = 0; i < info["def"].length; i++) { output = ""; var inner_div = document.createElement('div'); inner_div.className = "inner"; var res = main_div.appendChild(inner_div); for (var j = 0; j < info["def"][i]["tr"].length; j++) { for (var key in info["def"][i]) { if (info["def"][i].hasOwnProperty(key) && typeof info["def"][i][key] != "object") { output += '<span class=f_' + key + '>' + info["def"][i][key] + " " + ' 1</span>'; } } for (var key2 in info["def"][i]["tr"][j]) { if (info["def"][i]["tr"][j].hasOwnProperty(key2) && typeof info["def"][i]["tr"][j][key2] != "object") { output += '<span class=l_' + key2 + '>' + info["def"][i]["tr"][j][key2] + " " + ' 2</span>'; } } } //for each object res.insertAdjacentHTML('afterBegin', output); }

 .inner { border: 1px solid black; }

The result of executing the loop in a separate inner_div

1 answer 1

More articles: