0

Никак не могу вывеси правильный результат. Есть файл JSON и нужно с помощью циклов вывести вот такое:

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

{
  "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": "настоящая кнопка"
        }]
      }]
    }]
  }]
}

Мой код JavaScript:

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);

}

1 ответ 1

1

Ваша ошибка в том, что после добавления разметки, не очищается output, таким образом в первый раз вставляются нужные элементы, на второй итерации к ним же добавляются нужные для второго элемента, и во второй элемент вставляется разметка, в которой находятся данные и для первого и для второго.

Простым решением будет просто инициализировать output пустой строкой, в начале основного цикла.

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;
}

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.