Fail code for document.write + for function recrusive form

Question

I cant find my fail in the code why the secound for loop doesnt work. Please help me. thx

i tried to modify the for code. i tried to look if it works without the secound loop and it does. any idea?

//--js file with the object array which is loaded in the 2nd file--
let inhaltsverzeichnis_beispiele = [ 
  { blatt:'1' 
    ,name: ['Übungszettel 1 [2013]', 'Übungszettel 1 [2014]', 'Übungszettel 1 [2018]']
    ,a_href: ['Übungsbeispiele_1_2013','Übungsbeispiele_1_2014','Übungsbeispiele_1_2018']
    ,fach: ['Physik Integral- und Differentionrechnungen','Physik Integral- und Differentionrechnungen','Informatik AnalysisT1']
   },
 ]

//----2nd file code segment
document.write('<button class="buttn" onclick="myFunction(\'index\')" style="color:red;">Inhaltsverzeichnis</button><div id="index" style="display:none;"><ul style="list-style: none;">');
  for (NR_i = 0; NR_i < inhaltsverzeichnis_beispiele.length; NR_i++) {
    document.write(
      '<li>'
        + '<table>'
        +   '<tr>'
        +     '<td style="width:30px">' 
        +        inhaltsverzeichnis_beispiele[NR_i].blatt 
        +     '</td>'
      );
      //---- That loop doesnt work =/
      for (NR_i2 = 0; NR_i2 < inhaltsverzeichnis_beispiele[Nr_i].name[NR_i2].length; NR_i2++) { 
        document.write(
          +  '<td>' 
          +    '<a href="#'
          +      inhaltsverzeichnis_beispiele[NR_i].a_href[NR_i2]
          +    '" >' 
          +      inhaltsverzeichnis_beispiele[NR_i].name[NR_i2]
          +    '</a>'
          +  '</td>'
        )
      }
      //----- That loop doesnt work =/ End
      document.write(
        +    '</tr>'
        +  '</table>'
        +'</li>' 
      );
    };  
 document.write('</ul></div>');
 //----2nd file code segment End

You should definitely re-write this into something more readable, break it up into different methods and with es6 features. — kemicofa ghost, Apr 02 '19 at 15:21
[And stop using `document.write`](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — , Apr 02 '19 at 15:22
@kemicofa what exactly you mean with break it into different methods? es6 for what? — Eduard Tester, Apr 02 '19 at 15:23
@EduardTester the code you currently have is just one massive script. How do you test each part ? Finding the issue would prove to be *much* easier if this script was divided into different methods (aka functions). For example, I'd have a method for each `for` loop. Use es6 feature [lexical string templating](http://es6-features.org/#StringInterpolation) for example... would make it much easier to read... — kemicofa ghost, Apr 02 '19 at 15:26

score 2 · Answer 1 · answered Apr 02 '19 at 15:53

You could take some array methods for iterating the data and build new elements and add them to the body (or any other element of the web page).

var inhaltsverzeichnis_beispiele = [{ blatt: '1', name: ['Übungszettel 1 [2013]', 'Übungszettel 1 [2014]', 'Übungszettel 1 [2018]'], a_href: ['Übungsbeispiele_1_2013', 'Übungsbeispiele_1_2014', 'Übungsbeispiele_1_2018'], fach: ['Physik Integral- und Differentionrechnungen', 'Physik Integral- und Differentionrechnungen', 'Informatik AnalysisT1'] }],
    ul = document.createElement('ul');

inhaltsverzeichnis_beispiele.forEach(({ blatt, name, a_href }) => {
    var li = document.createElement('li'),
        table = document.createElement('table'),
        tr = document.createElement('tr'),
        td = document.createElement('td');

    td.style = 'width:30px;';
    td.appendChild(document.createTextNode(blatt));
    tr.appendChild(td);
    name.forEach((value, i) => {
        var td = document.createElement('td'),
            a = document.createElement('a');

        a.href = a_href[i];
        a.appendChild(document.createTextNode(value));
        td.appendChild(a);
        tr.appendChild(td);
    });
    table.appendChild(tr);
    li.appendChild(table);
    ul.appendChild(li);
});

document.body.appendChild(ul);

score 1 · Accepted Answer · answered Apr 02 '19 at 15:43

I recommmend that you use es6 features and redo your code into something like this.

This uses a combination of template literals, Array#map, and Array#join

//--js file with the object array which is loaded in the 2nd file--
const inhaltsverzeichnis_beispiele = [{
  blatt: '1',
  name: ['Übungszettel 1 [2013]', 'Übungszettel 1 [2014]', 'Übungszettel 1 [2018]'],
  a_href: ['Übungsbeispiele_1_2013', 'Übungsbeispiele_1_2014', 'Übungsbeispiele_1_2018'],
  fach: ['Physik Integral- und Differentionrechnungen', 'Physik Integral- und Differentionrechnungen', 'Informatik AnalysisT1']
}];

const container = document.getElementById("container");
const buttonContainer = document.getElementById("button-container");
buttonContainer.innerHTML = `<button class="buttn" onclick="myFunction('index')" style="color:red;">Inhaltsverzeichnis</button>`

function generateTable(data){
  const res = [`<td style="width:30px">${data.blatt}</td>`];
  for(let i = 0; i < data.name.length; i++){
    const name = data.name[i];
    const href = data.a_href[i];
    res.push(`<td><a href="#${href}">${name}</a></td>`);
  }
  return `<table><tr>${res.join("")}</tr></table>`
}

function generateList(data){
  const res = data.map(item=>{
     const table = generateTable(item);
     return `<li>${table}</li>`;
  }).join("");
  
  return `<ul>${res}</ul>`
}

container.innerHTML = generateList(inhaltsverzeichnis_beispiele);

<div id="button-container">

</div>
<div id="container">

</div>

didnt know that writing style. now i have an real example how to do that. i implement it. thx@u — Eduard Tester, Apr 02 '19 at 16:41

Fail code for document.write + for function recrusive form

2 Answers2