0

Hola soy nuevo aqui y desearia que me ayudaran en un código de como concatenar html con javascript, este es mi codigo:

<ul>
    <li>objeto1</li>
    <li>objeto2</li>
    <li>objeto3</li>
    <li>objeto4</li>
</ul>

y necestio concatenar los li con un array en js como el siguiente

var frutas = [
      {
        'nombre'     : 'manzana',
        'indice' : 2
      },
      {
        'nombre'     : 'pera',
        'indice' : 4
      },
      {
        'nombre'     : 'durazno',
        'indice' : 1
      },
      {
        'nombre'     : 'fresa',
        'indice' : 3
      }
];

para que me muestre el indice mayor y el segundo mayor concatenado con los li de la lista, ejemplo:

  • Objeto 1, pera
  • Objeto 2, fresa
  • Espero que me puedan ayudar y de haberme explicado bien

    1

    1 respuesta 1

    1

    Puedes usar Array.prototype.sort para ordenar el array, ya que es un array de objetos, vamos a ordenarlo dándole al método un callback, luego de ordenarlo, solo lo revertimos con Array.prototype.reverse, definimos una variable que irá aumentando, para poner el índice actual

    let frutas = [
          {
            'nombre'     : 'manzana',
            'indice' : 2
          },
          {
            'nombre'     : 'pera',
            'indice' : 4
          },
          {
            'nombre'     : 'durazno',
            'indice' : 1
          },
          {
            'nombre'     : 'fresa',
            'indice' : 3
          }
    ];
    
    function orderUl(items) {
      items = (items.sort((a, b) => { 
        if (a.indice > b.indice) {
          return 1;
        }
        if (a.indice < b.indice) {
          return -1;
        }
        return 0;
      })).reverse();
    
      // Puedes hacer el sort() más corto:
      // items = (items.sort((a, b) => ((a.indice < b.indice)) ? -1 : ((a.indice > b.indice) ? 1 : 0))).reverse();
      
      let i = 1;
      items.forEach(el => {
        exampleUl.innerHTML += `<li>Objeto ${i}, ${el.nombre}</li>`;
        i++;
      });
    }
    
    orderUl(frutas);
    <ul id="exampleUl"></ul>

    4
    • Todavía puedes hacer más corto el sort: items = items.sort((a, b) => a.indice - b.indice).reverse(); y no es necesaria la variable i, porque en forEach() puedes agregar un segundo parámetro para obtener el índice.
      – Triby
      Commented el 8 mar. 2021 a las 19:48
    • Y, puedes evitar reverse() invirtiendo la operación: items = items.sort((a, b) => b.indice - a.indice);. De cualquier forma, es buena la respuesta.
      – Triby
      Commented el 8 mar. 2021 a las 19:51
    • Gracias por sus comentarios, fueron de gran ayuda
      – Rob
      Commented el 9 mar. 2021 a las 1:10
    • a que te refieres que no es necesario agregar i usando un segundo parámetro?
      – Rob
      Commented el 9 mar. 2021 a las 2:22

    Tu Respuesta

    By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

    ¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.