Помогите с задачкой!
Есть 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);
}
}
Проблема этого кода в том, что он выполняется синхронно относительно внешнего цикла, и асинхронно во внутреннем. Хотелось бы комментариев, правильно ли я прохожу по объекту и массиву, может можно как то по другому ? Всем большое спасибо и хорошего кода!
Простой