Как генерировать html посредством javascript кода правильно?

Question

[Павел]

Делаю для себя некий отчет, вот ссылка на то что есть сейчас https://codepen.io/mrusklon/pen/PdwzyJ
Есть у меня "Список работников" , первая колонка , я его руками перетаскиваю в другие колонки , далее жму кнопку "генерировать отчет" и имена работников должны вставится в поля ниже там где "готовый отчет" , вся соль в том что работникам надо дать профессии и указать рядом с ФИО , а самих работников в цех может быть направленно от 1 до N , если у меня есть массив с ФИО и профессиями как его распределять в зависимости от количества работников в готовый отчет..

Не надеюсь получить готовый ответ, подойдет и помощь с правильным направлением, эту задачу я взял чисто для самообучения, в коде я рано или поздно разберусь, а вот как теорию до кучи собрать не соображу пока. Например как из обьекта peopleName в моем примере раскидать людей сперва в колонку "Список работников" , а затем уже в "готовый отчет"

и да наверно стоило разбить все это дело на мелкие задачи и разные вопросы , только в том и проблема что пока не знаю как спросить , в любом случае спасибо за ответы!

Comments

[lamer350]

Программирование - это не только получение конечного результата любым способом, но и построение правильной логики, которая могла бы масштабироватmся в будущем без проблем.
Ваша логика очень запутана для такой простой задачи. Почему ФИО и должность хранится в переменной в JS? У вас нет зависимостей в именах и sortable-list, отсюда возникает вопрос - как после перетаскивания вы хотите распределить потом все? Создавать в js еще одну переменную с еще одним массивом?
Сейчас вы уперлись и не знаете как дальше быть только потому что сами себя загнали в угол.

[Павел]

lamer350, вот вот, накуролесил с логикой , поэтому прошу помощи, ФИО надо как то хранить удобно чтоб можно было просто их добавлять\убирать , "красиво" , в обьекте это сейчас хорошо и удобно, в принципе можно и просто хранить в html где нибудь в скрытом виде , не принципиально , но от этого не легче)) , подскажи с чего начать? Какую задачу первую выполнить или как может еще проще сделать?

[Виктор Л]

например ..

<ul id="workers"></ul>
<script>

const workers = [
  {name:"Петров В.И."},
  {name:"Иванов А.И."},
  {name:"Сидоров В.А."}
];

const  workersToHtml = (obj) => {return `<li class="cards_item">${obj.name}</li>`}

workers.forEach((item) => {
  document.getElementById("workers").innerHTML +=workersToHtml(item);
})
</script>