Bruk av flere loops inne i hverandre?

[jappadu]

Jeg ønsker å bli bedre innen Javascript og har skrevet en kodesnutt med flere loops. Har skjønt at man skal unngå for mange loops sammen. Finnes det en bedre måte å skrive denne koden på? Kom gjerne med tips Takk på forhånd

var html = '';
for(var i = 0; i<arrTables.length; i++)
{
  if(arrTables[i].indexOf('</ol>') > -1)
  {
    var tableItem    = arrTables[i].substr(0, arrTables[i].indexOf('</ol>')).split('<li>'),
        tableTitle   = arrTables[i].split('$')[1],
        tableColumns = arrTables[i].split('#')[1];
    html += '<li class="item'+i+'">';
    html += '\n\t<span>'+tableTitle+'</span>\n';
    html += '\t<ul>\n';
    for(var j = 0; j<tableItem.length; j++)
    { 
      for(var k = 1; k<tableColumns+1; k++)
      {
        if(j%tableColumns+1 == l && j != 0)
	{
	  // Start item tag
	  if(j%tableColumns+1 == 2)
	  {
	    html += '\t\t<li class="item'+j+'">\n';
	    html += '\t\t\t<ul>\n';
	  }
	  // Item value 
	  html += '\t\t\t\t<li>'+tableItem[j];
	  // End item tag
	  if(j%tableColumns+1 == 1)
	  {
	    html += '\t\t\t</ul>\n';
	    html += '\t\t</li>\n';
	  }
	}
      }
    }
    html += '\t</ul>\n';
    html += '</li>\n';
  }
}
return html;

Endret 23. juli 2015 av webliz

[etse]

Se på funksjonelle ting som filter() og map() disse kan fort gjøre koden mye mer lettleselig. I tillegg er det ofte greit å prøve å dele opp et problem i små brikker - og la hver brikke være en egen funksjon. I stede for å lage en stor funksjon som løser hele problemet. Det gjør det mye lettere å lese koden. 

[jappadu]

Se på funksjonelle ting som filter() og map() disse kan fort gjøre koden mye mer lettleselig. I tillegg er det ofte greit å prøve å dele opp et problem i små brikker - og la hver brikke være en egen funksjon. I stede for å lage en stor funksjon som løser hele problemet. Det gjør det mye lettere å lese koden. 

Takk for tipset. Slik gjør egentlig koden:

 

Lager en tabell i <ul>

1: Array: Henter lister <ol>

2: Loop1: Fordeler listene tabell

3: Loop2: Fordeler punktene pr liste rad

4: Loop3: Organiserer punkter med enda en liste kolonne

 

Slik som dette:

<li>
  <span>Tittel på tabellen</span>
  <ul>
    <!- Loop 1 -->
    <li class="table1">
      <ul>
        <!- Loop 2 -->
        <li class="row1">
          <ul>
            <!-- Loop 3 - Match with defined column limit. ex 4 -->
            <li class="column1">
              <!-- Value -->
            </li>
            <li class="column2">
              <!-- Value -->
            </li>
            <li class="column3">
              <!-- Value -->
            </li>
            <li class="column4">
              <!-- Value -->
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>

  

Håper dette beskriver bedre?

Endret 22. juli 2015 av webliz

[Stream]

Det er ikke noe problem å ha flere looper inne i hverandre slik du har gjort. Hvis det er snakk om mye data å loope gjennom går selvsagt ytelsen ned - men det vil du jo merke.

[haugsand]

Siden du omtaler dette som en tabell: Har du vurdert å bruke table-elementet i stedet for å bruke en liste?

 

Å bruke Document Fragments kan gi ryddigere kode og bedre ytelse fremfor å legge alt til html-variabelen underveis. 

[jappadu]

Siden du omtaler dette som en tabell: Har du vurdert å bruke table-elementet i stedet for å bruke en liste?

 

Å bruke Document Fragments kan gi ryddigere kode og bedre ytelse fremfor å legge alt til html-variabelen underveis. 

Takk, skal sjekke ut Document Fragments. Enig, table-elementet er nok mest naturlig

Endret 23. juli 2015 av webliz