How to iterate over json data for asynchronous output with timing?

Question

JavaScript

Help with a problem!
There is json data
. I need to iterate over them, and generate a layout for updating with a certain timing.
Enter the tree along the path 0 - stages_of_the_battle - visual_log_of_the_battle - 0 Accordingly, visual_log_of_the_battle is an array consisting of three objects (there will be more than 100) They need to be processed somehow (go into each and form a string (layout) from the object data) and add to dom with timing.
Question: how would you go through such json? At least tell from visual_log_of_the_battle and nested objects. How to pass them?
I need the script to continue to the next iteration of the loop until the objects in the visual_log_of_the_battle array run out. And as you know, all loops are executed synchronously, and because of this, the result is not displayed in the order in which the objects and iterations of the loop go.
Question: How would you deal with asynchrony in for and for in ?
How I have done so far:

var dataBattle = JSON.parse('[{"stages_of_the_battle":{"my_heroes":,"rival_heroes":,"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":,"rival_heroes":,"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);

  }
}

The problem with this code is that it runs synchronously with respect to the outer loop, and asynchronously with the inner one. I would like comments, am I going through the object and the array correctly, maybe it's possible in a different way? Thank you all and good code!

Answer 1

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

var dataBattle = JSON.parse('[{"stages_of_the_battle":{"my_heroes":,"rival_heroes":,"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":,"rival_heroes":,"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)