Как вывести значения из массива JS в html?

Question

[eldgammel]

ребят, помогите плиз, уже долго пытаюсь, если не сложно поясните код, не просто сухой отве, плиз
обязательно на JS, без jQuery и всего прочего

Суть:

1. нажимаете на "кнопка 1" появляются n-ное кол-во блоков и в него вливается данные из массива, нажимаете на "сбросить" все из "кнопка 1" удаляется, опять нажимаете на "кнопка 1" и появляется n-ное кол-во блоков и в него вливаются другие данные из массива
   
2. есть блок, в него из массива нужно добавить id, ссылку на pdf и title + значения массива изменяются, и количество блоков тоже, нужно как-то постоянно очищать блок html и заново заполнять новыми данными
   

HTML (1) - это кнопки

<div>
  <button onclick="pressButtonA()">Кнопка 1</button>
  <button onclick="Again">Сборосить</button>
</div>

HTML (2) - это пустой блок куда все добавлять, тут как шаблон написан только 1 блок, но они могут увеличиваться хоть до 100, если массив требует

<div>
     <div id="" href="ссылка на pdf">title</div>
</div>

а это Его Величество JavaScript - в данном примере должно нарисоваться 3 блока и заполниться данными

var arr = new Array();
arr[411] = [{id: 25-1, title: 'GA-1200 8MM', pdf: 'ссылка.pdf'}, 
            {id: 25-2, title: 'GA-1232 9MM', pdf: 'ссылка.pdf'},
            {id: 25-3, title: 'GA-1441 13MM', pdf: '131.pdf'}];

за ранее всем спасибо, не ругайте дурака(

Comments

[alexalexes]

Как вы представляете решение задачи в обработчике pressButtonA и Again?

[eldgammel]

alexalexes, нажали на pressButonA - вылетело 3 блока с заполненными данными, нажали на Again - все удалилось как-будто и не было ничего, как-то так

Answer 1

[Absolute138]

<div>
  <button onclick="pressButtonA()">Кнопка 1</button>
  <button onclick="Again()">Сборосить</button>
</div>
  <div id="links">
    
</div>

var arr = new Array();
arr[411] = [{id: 25-1, title: 'GA-1200 8MM', pdf: 'ссылка.pdf'}, 
            {id: 25-2, title: 'GA-1232 9MM', pdf: 'ссылка.pdf'},
            {id: 25-3, title: 'GA-1441 13MM', pdf: '131.pdf'}];

function pressButtonA(){
  
  var links = document.getElementById('links');
  arr.forEach(function(v){  
    if(typeof v == 'object'){
      v.forEach(function(v){
        if(typeof v == 'object'){
          var a = document.createElement('a');
          a.href = v.pdf;
          a.id = v.id;
          a.textContent = v.title;
          links.appendChild(a);
        }
      })
    }
    
  });

}
function Again(){
   var a = document.getElementById('links');
   while(a.firstChild){
     a.removeChild(a.firstChild);
   }
}

Answer 2

[Чипекве]

<div id="pdf-links"></div>

<div id="control-buttons">
  <button>Кнопка 1</button>
  <button>Сборосить</button>
</div>

const arr = [{id: 25-1, title: 'GA-1200 8MM', pdf: 'ссылка.pdf'}, 
            {id: 25-2, title: 'GA-1232 9MM', pdf: 'ссылка.pdf'},
            {id: 25-3, title: 'GA-1441 13MM', pdf: '131.pdf'}];

document.querySelector('#control-buttons').addEventListener('click', ({target}) => {
  if (!target.closest('button')) return;  
  document.querySelector('#pdf-links').innerHTML = (target.innerText === 'Кнопка 1') 
    ? arr.map(e => `<div><a id="${e.id}" href="${e.pdf}">${e.title}</a></div>`).join('') 
    : '';
})