Как перебрать json данные для асинхронного вывода с таймингом?

Question

[vovaaar]

Помогите с задачкой!

Есть json данные

Мне нужно перебирать их, и генерировать верстку для обновления с определенным таймингом.

Зайдите в дереве по пути 0 - stages_of_the_battle - visual_log_of_the_battle - 0 Соответственно visual_log_of_the_battle - это массив, состоящий из трех объектов (будет больше 100) Их как то нужно обработать (заходить в каждый и формировать из данных объекта строку(верстку)) и добавлять в dom с таймингом.

Вопрос: как бы вы проходили по такому json? Хотя бы расскажите от visual_log_of_the_battle и вложенные объекты. Как их проходить?

Мне нужно чтобы до тех пор, пока объекты в массиве visual_log_of_the_battle не закончатся, скрипт не переходил к следующей итерации цикла. А как известно все циклы выполняются синхронно, и из за этого результат не выводится в том порядке, в котором идут объекты и итерации цикла.

Вопрос: Как бы вы справились с асинхронностью в for и for in ?

Как я сделал на данный момент:

var dataBattle = JSON.parse('[{"stages_of_the_battle":{"my_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":98,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":97.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":96.8,"faith_of_hero":25}]],"rival_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":95.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99.8,"faith_of_hero":25}]],"visual_log_of_the_battle":[{"my_hero_login":"vovkka","img":"ico_1","name_of_the_type_impact":"\u0443\u0434 1","rival_hero_login":"groza","cause_damage":-30,"part_life_hero":370,"total_life_hero":400,"counter_attack":{"rival_hero_login":"groza","img":"ico_3","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500}},{"rival_hero_login":"groza","img":"ico_3","name_of_the_type_impact":"\u0443\u0434 2","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500},{"rival_hero_login":"groza","img":"ico_5","name_of_the_type_impact":"\u0443\u0434 3","my_hero_login":"vovkka","cause_damage":-25,"part_life_hero":435,"total_life_hero":500}],"result_of_fight":"\u041f\u043e\u0431\u0435\u0434\u0430!"}},{"stages_of_the_battle":{"my_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":98,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":97.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":96.8,"faith_of_hero":25}]],"rival_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":95.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99.8,"faith_of_hero":25}]],"visual_log_of_the_battle":[{"my_hero_login":"vovkka","img":"ico_3","name_of_the_type_impact":"\u0443\u0434 1","rival_hero_login":"zmei","cause_damage":-60,"part_life_hero":360,"total_life_hero":400,"counter_attack":{"rival_hero_login":"zmei","img":"ico_3","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500}},{"rival_hero_login":"zmei","img":"ico_7","name_of_the_type_impact":"\u0443\u0434 2","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":415,"total_life_hero":500},{"rival_hero_login":"zmei","img":"ico_2","name_of_the_type_impact":"\u0443\u0434 3","my_hero_login":"vovkka","cause_damage":-55,"part_life_hero":375,"total_life_hero":500}],"result_of_fight":"\u041f\u043e\u0431\u0435\u0434\u0430!"}}]');

for (var i = 0; i < dataBattle.length; i++) {
  for (var k = 0; k < dataBattle[i].stages_of_the_battle.visual_log_of_the_battle.length; k++) {
    let str = '<div class="battle-plan-plash-step">';
    str += '<div class="step-user-one">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].my_hero_login + '</div>';
    str += '<span class="step-ico jtooltip" title="' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].name_of_the_type_impact + '"><i class="ico-step-one"></i></span>';
    str += '<div class="step-user-two step-user-enemy">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].rival_hero_login + '</div>';
    str += '<div class="step-user-return">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].cause_damage + '</div>';
    str += '<div class="step-user-summary">[' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].part_life_hero + ' / ' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].total_life_hero + ']</div>';
    str += '</div>';

    (function(index) {
      setTimeout(function() {
        //$('.battle-plan-plash-holder').prepend(str);
        console.log(str);
      }, 2000 * (k + 1));
    })(k);

  }
}

Проблема этого кода в том, что он выполняется синхронно относительно внешнего цикла, и асинхронно во внутреннем. Хотелось бы комментариев, правильно ли я прохожу по объекту и массиву, может можно как то по другому ? Всем большое спасибо и хорошего кода!

Answer 1

[shmatuan]

https://codepen.io/andreysh/pen/mvwpwo?editors=1010

var dataBattle = JSON.parse('[{"stages_of_the_battle":{"my_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":98,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":97.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":96.8,"faith_of_hero":25}]],"rival_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":95.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99.8,"faith_of_hero":25}]],"visual_log_of_the_battle":[{"my_hero_login":"vovkka","img":"ico_1","name_of_the_type_impact":"\u0443\u0434 1","rival_hero_login":"groza","cause_damage":-30,"part_life_hero":370,"total_life_hero":400,"counter_attack":{"rival_hero_login":"groza","img":"ico_3","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500}},{"rival_hero_login":"groza","img":"ico_3","name_of_the_type_impact":"\u0443\u0434 2","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500},{"rival_hero_login":"groza","img":"ico_5","name_of_the_type_impact":"\u0443\u0434 3","my_hero_login":"vovkka","cause_damage":-25,"part_life_hero":435,"total_life_hero":500}],"result_of_fight":"\u041f\u043e\u0431\u0435\u0434\u0430!"}},{"stages_of_the_battle":{"my_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":98,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":97.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":96.8,"faith_of_hero":25}]],"rival_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":95.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99.8,"faith_of_hero":25}]],"visual_log_of_the_battle":[{"my_hero_login":"vovkka","img":"ico_3","name_of_the_type_impact":"\u0443\u0434 1","rival_hero_login":"zmei","cause_damage":-60,"part_life_hero":360,"total_life_hero":400,"counter_attack":{"rival_hero_login":"zmei","img":"ico_3","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500}},{"rival_hero_login":"zmei","img":"ico_7","name_of_the_type_impact":"\u0443\u0434 2","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":415,"total_life_hero":500},{"rival_hero_login":"zmei","img":"ico_2","name_of_the_type_impact":"\u0443\u0434 3","my_hero_login":"vovkka","cause_damage":-55,"part_life_hero":375,"total_life_hero":500}],"result_of_fight":"\u041f\u043e\u0431\u0435\u0434\u0430!"}}]');

var data = []

for (var i = 0; i < dataBattle.length; i++) {
  for (var k = 0; k < dataBattle[i].stages_of_the_battle.visual_log_of_the_battle.length; k++) {
    let str = '<div class="battle-plan-plash-step">';
    str += '<div class="step-user-one">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].my_hero_login + '</div>';
    str += '<span class="step-ico jtooltip" title="' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].name_of_the_type_impact + '"><i class="ico-step-one"></i></span>';
    str += '<div class="step-user-two step-user-enemy">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].rival_hero_login + '</div>';
    str += '<div class="step-user-return">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].cause_damage + '</div>';
    str += '<div class="step-user-summary">[' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].part_life_hero + ' / ' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].total_life_hero + ']</div>';
    str += '</div>';

    data.push({k, str})
  }
}

var update = function(k) {
  setTimeout(function() {
    //$('.battle-plan-plash-holder').prepend(str);
    console.log( "time " + (1000 * (k + 1)) ,data[k].str);
    update(k + 1)
  }, 1000 * (k + 1));
}

update(0)

Comments

[vovaaar]

shmatuan мне нравится ваш ответ! есть вопрос: вы поместили данные в массив data и потом от туда работаете с ними. как вы думаете это хороший способ перегонять данные в данные? был объект а еще массив добавился. Данных будет много, возможно массив будет на 3-5к элементов. как считаете нормально ли это?
И еще вопрос: если мне нужно генерировать такую верстку скажем для 10 разных блоков dom, мне 10 массивов разных придется делать и к ним обращаться? Спасибо!

[shmatuan]

vovaaar, Вот, ещё как вариант можно рекурсивно сразу изменять https://codepen.io/andreysh/pen/JxJLXG?editors=1010
если на столько много данных, то лучше без data)

для 10 разных тем более без data - что бы отслеживать в каком изменения - можно передавать дополнительный параметр в update() с нужным id или селектором

[shmatuan]

vovaaar, p.s. есть ещё вариант с async/await, возможно он будет лучше https://habr.com/ru/company/ruvds/blog/326074/