List within a for in

Question

List within a for in

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I have the following code

    for (a in secciones){
            ncompoa += "<h1>";
            ncompoa += secciones[a];
            ncompoa += "</h1>";
            ncompoa += "<ol>";

            for (li in producto) {
            if (producto[li].grupo == secciones[a]) 
            {
                  ncompoa += "<li>";
                  ncompoa += producto[li].n;
                  ncompoa += "</li>";
             }
        }       
            };
ncompoa += "</ol>";
    document.getElementById('contenido').innerHTML = ncompoa;

What results in the following:

TITLE1

Content

TITLE2

Content

TITLE3

Content

And the result I want is to be:

TITLE1

Content

TITLE2

Content

TITLE3

Content

Can someone guide me what should I do or where should I place the

ncompoa += "<ol>";

so that this label is excluded from the first for ..?

javascript variables bucle-for

asked by Jose M Herrera V 06.08.2018 в 18:42

source

2 answers

2

You must close the ncompoa += "</ol>"; tag within the first loop

var secciones = ['colores','letras'];
var producto = [{grupo: 'colores',n:'azul'},{grupo: 'colores',n:'rojo'},
{grupo: 'letras',n:'A'},{grupo: 'letras',n:'B'}];

var ncompoa = "";
   for (a in secciones){
            ncompoa += "<h1>";
            ncompoa += secciones[a];
            ncompoa += "</h1>";
            ncompoa += "<ol>";

            for (li in producto) {
            if (producto[li].grupo == secciones[a]) 
            {
                  ncompoa += "<li>";
                  ncompoa += producto[li].n;
                  ncompoa += "</li>";
             }
        }       
        ncompoa += "</ol>";
            };

    document.getElementById('contenido').innerHTML = ncompoa;

<div id="contenido"></div>

answered by 06.08.2018 в 18:45

Validate several input with a single function How do you load data from ajax when the page loads?

score 2 · Accepted Answer

You must close the <ol> tag after your second for :

for (a in secciones) {

  ncompoa += "<h1>";
  ncompoa += secciones[a];
  ncompoa += "</h1>";
  ncompoa += "<ol>";

  for (li in productos) {
    if (productos[li].grupo == secciones[a]) {
      ncompoa += "<li>";
      ncompoa += productos[li].n;
      ncompoa += "</li>";
    }
  }

  // Aquí debes cerrar la etiqueta
  ncompoa += "</ol>";

};

Demo:

var secciones = ["TITULO1", "TITULO2", "TITULO3"];
var productos = [{
    "n": "Producto1",
    "grupo": "TITULO1"
  },
  {
    "n": "Producto2",
    "grupo": "TITULO1"
  },
  {
    "n": "Producto3",
    "grupo": "TITULO1"
  },
  {
    "n": "Producto4",
    "grupo": "TITULO2"
  },
  {
    "n": "Producto5",
    "grupo": "TITULO2"
  },
  {
    "n": "Producto6",
    "grupo": "TITULO2"
  },
  {
    "n": "Producto7",
    "grupo": "TITULO3"
  },
  {
    "n": "Producto8",
    "grupo": "TITULO3"
  },
  {
    "n": "Producto9",
    "grupo": "TITULO3"
  },
];

var ncompoa = "";

for (a in secciones) {

  ncompoa += "<h1>";
  ncompoa += secciones[a];
  ncompoa += "</h1>";
  ncompoa += "<ol>";

  for (li in productos) {
    if (productos[li].grupo == secciones[a]) {
      ncompoa += "<li>";
      ncompoa += productos[li].n;
      ncompoa += "</li>";
    }
  }

  // Aquí debes cerrar la etiqueta
  ncompoa += "</ol>";

};
document.getElementById('contenido').innerHTML = ncompoa;

<div id="contenido"></div>