1

tengo un archivo json con 50 productos de los cuales cada producto tiene un array con fotos, el caso es que algunos tienen 1 foto y otros 2. Quiero armar un map con una template string para pintar esas fotos en el dom. si mapeo el indice 0 del array todo va bien porque todos tienen fotos, pero el indice 1 solo unos pocos tienen fotos y salta error, como puedo poner un condicional en el map o en la template string para evaluar si no tiene foto? (para probar cambiar por en dejo el ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="lista"></div>

  <script>
    let $contenido = [],
    $lista = document.querySelector(".lista");

    getData();

    async function getData(){
      try{
        let res = await fetch("/Productos-V2.json"),
          json = await res.json();

        if(!res.ok) throw{ status: res.status, statusText: res.statusText }
        
        $contenido = json.map(el => `<img src="${el.Fotos[0].Foto}">`);
        console.log($contenido)
        document.querySelector(".lista").insertAdjacentHTML("beforeend", $contenido.join(""));


      }catch(err){
        let message = err.statusText || " Ocurrió un error";
        $lista.innerHTML = `Error ${err.status}:${message}`;
      }finally{ }
    }
  </script>
  
</body>

</html>

aqui esta el json

[
    {
    "ProductoID": 12,
    "Modelo": "HB01-150",
    "Descripcion": "Luminaria High Bay (UFO) Antideslumbramiento",
    "UnidadesEmbalaje": 1,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "150",
        "Unidad": "W"
      },
      {
        "Descripcion": "Dimmable",
        "Valor": "NO"
      },
      {
        "Descripcion": "Tensión",
        "Valor": "100~277",
        "Unidad": "VCA"
      },
      {
        "Descripcion": "Eficiencia",
        "Valor": "130",
        "Unidad": "Lm/W"
      },
      {
        "Descripcion": "Cantidad de leds",
        "Valor": "288"
      },
      {
        "Descripcion": "Protección",
        "Valor": "IP66"
      },
      {
        "Descripcion": "Factor de Potencia",
        "Valor": ">0,95"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "60",
        "Unidad": "º"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">70"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "ProductoID": 13,
    "Modelo": "HB01-200",
    "Descripcion": "Luminaria High Bay (UFO) Antideslumbramiento",
    "UnidadesEmbalaje": 1,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "200",
        "Unidad": "W"
      },
      {
        "Descripcion": "Dimmable",
        "Valor": "NO"
      },
      {
        "Descripcion": "Tensión",
        "Valor": "100~277",
        "Unidad": "VCA"
      },
      {
        "Descripcion": "Eficiencia",
        "Valor": "125",
        "Unidad": "Lm/W"
      },
      {
        "Descripcion": "Cantidad de leds",
        "Valor": "288"
      },
      {
        "Descripcion": "Protección",
        "Valor": "IP66"
      },
      {
        "Descripcion": "Factor de Potencia",
        "Valor": ">0,95"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "60",
        "Unidad": "º"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">70"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "ProductoID": 14,
    "Modelo": "HB01-240",
    "Descripcion": "Luminaria High Bay (UFO) Antideslumbramiento",
    "UnidadesEmbalaje": 1,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "240",
        "Unidad": "W"
      },
      {
        "Descripcion": "Dimmable",
        "Valor": "NO"
      },
      {
        "Descripcion": "Tensión",
        "Valor": "100~277",
        "Unidad": "VCA"
      },
      {
        "Descripcion": "Eficiencia",
        "Valor": "120",
        "Unidad": "Lm/W"
      },
      {
        "Descripcion": "Cantidad de leds",
        "Valor": "288"
      },
      {
        "Descripcion": "Protección",
        "Valor": "IP66"
      },
      {
        "Descripcion": "Factor de Potencia",
        "Valor": ">0,95"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "60",
        "Unidad": "º"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">70"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "ProductoID": 15,
    "Modelo": "HB01-100-D",
    "Descripcion": "Luminaria High Bay (UFO) Antideslumbramiento - Dimmerizable",
    "UnidadesEmbalaje": 1,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "100",
        "Unidad": "W"
      },
      {
        "Descripcion": "Dimmable",
        "Valor": "SI"
      },
      {
        "Descripcion": "Tensión",
        "Valor": "100~277",
        "Unidad": "VCA"
      },
      {
        "Descripcion": "Eficiencia",
        "Valor": "135",
        "Unidad": "Lm/W"
      },
      {
        "Descripcion": "Cantidad de leds",
        "Valor": "288"
      },
      {
        "Descripcion": "Protección",
        "Valor": "IP66"
      },
      {
        "Descripcion": "Factor de Potencia",
        "Valor": ">0,95"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "60",
        "Unidad": "º"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">70"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "ProductoID": 16,
    "Modelo": "HB01-150-D",
    "Descripcion": "Luminaria High Bay (UFO) Antideslumbramiento - Dimmerizable",
    "UnidadesEmbalaje": 1,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "150",
        "Unidad": "W"
      },
      {
        "Descripcion": "Dimmable",
        "Valor": "SI"
      },
      {
        "Descripcion": "Tensión",
        "Valor": "100~277",
        "Unidad": "VCA"
      },
      {
        "Descripcion": "Eficiencia",
        "Valor": "130",
        "Unidad": "Lm/W"
      },
      {
        "Descripcion": "Cantidad de leds",
        "Valor": "288"
      },
      {
        "Descripcion": "Protección",
        "Valor": "IP66"
      },
      {
        "Descripcion": "Factor de Potencia",
        "Valor": ">0,95"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "60",
        "Unidad": "º"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">70"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "ProductoID": 17,
    "Modelo": "HB01-200-D",
    "Descripcion": "Luminaria High Bay (UFO) Antideslumbramiento - Dimmerizable",
    "UnidadesEmbalaje": 1,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "200",
        "Unidad": "W"
      },
      {
        "Descripcion": "Dimmable",
        "Valor": "SI"
      },
      {
        "Descripcion": "Tensión",
        "Valor": "100~277",
        "Unidad": "VCA"
      },
      {
        "Descripcion": "Eficiencia",
        "Valor": "125",
        "Unidad": "Lm/W"
      },
      {
        "Descripcion": "Cantidad de leds",
        "Valor": "288"
      },
      {
        "Descripcion": "Protección",
        "Valor": "IP66"
      },
      {
        "Descripcion": "Factor de Potencia",
        "Valor": ">0,95"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "60",
        "Unidad": "º"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">70"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "ProductoID": 18,
    "Modelo": "HB01-240-D",
    "Descripcion": "Luminaria High Bay (UFO) Antideslumbramiento - Dimmerizable",
    "UnidadesEmbalaje": 1,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "240",
        "Unidad": "W"
      },
      {
        "Descripcion": "Dimmable",
        "Valor": "SI"
      },
      {
        "Descripcion": "Tensión",
        "Valor": "100~277",
        "Unidad": "VCA"
      },
      {
        "Descripcion": "Eficiencia",
        "Valor": "120",
        "Unidad": "Lm/W"
      },
      {
        "Descripcion": "Cantidad de leds",
        "Valor": "288"
      },
      {
        "Descripcion": "Protección",
        "Valor": "IP66"
      },
      {
        "Descripcion": "Factor de Potencia",
        "Valor": ">0,95"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "60",
        "Unidad": "º"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">70"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "ProductoID": 19,
    "Modelo": "NK-UFO-12-E",
    "Descripcion": "Lámpara UFO 12W",
    "UnidadesEmbalaje": 20,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "12",
        "Unidad": "W"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "170",
        "Unidad": "º"
      },
      {
        "Descripcion": "Input voltage",
        "Valor": "175-250",
        "Unidad": "V"
      },
      {
        "Descripcion": "Frecuencia",
        "Valor": "50",
        "Unidad": "Hz"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">80"
      },
      {
        "Descripcion": "Diámetro",
        "Valor": "125",
        "Unidad": "mm"
      },
      {
        "Descripcion": "Altura",
        "Valor": "75",
        "Unidad": "mm"
      },
      {
        "Descripcion": "Luminous Flux",
        "Valor": "1020",
        "Unidad": "lm (±10%)"
      },
      {
        "Descripcion": "Zócalo",
        "Valor": "E27"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  },
  {
    "ProductoID": 22,
    "Modelo": "NK-UFO-18-E",
    "Descripcion": "Lámpara UFO 18W",
    "UnidadesEmbalaje": 10,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "18",
        "Unidad": "W"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "170",
        "Unidad": "º"
      },
      {
        "Descripcion": "Input voltage",
        "Valor": "175-250",
        "Unidad": "V"
      },
      {
        "Descripcion": "Frecuencia",
        "Valor": "50",
        "Unidad": "Hz"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">80"
      },
      {
        "Descripcion": "Diámetro",
        "Valor": "125",
        "Unidad": "mm"
      },
      {
        "Descripcion": "Altura",
        "Valor": "81",
        "Unidad": "mm"
      },
      {
        "Descripcion": "Luminous Flux",
        "Valor": "1275",
        "Unidad": "lm (±10%)"
      },
      {
        "Descripcion": "Zócalo",
        "Valor": "E27"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  },
  {
    "ProductoID": 23,
    "Modelo": "NK-UFO-24-E",
    "Descripcion": "Lámpara UFO 24W",
    "UnidadesEmbalaje": 10,
    "Especificaciones": [
      {
        "Descripcion": "Potencia",
        "Valor": "24",
        "Unidad": "W"
      },
      {
        "Descripcion": "Ángulo de Haz",
        "Valor": "170",
        "Unidad": "º"
      },
      {
        "Descripcion": "Input voltage",
        "Valor": "175-250",
        "Unidad": "V"
      },
      {
        "Descripcion": "Frecuencia",
        "Valor": "50",
        "Unidad": "Hz"
      },
      {
        "Descripcion": "C.R.I.",
        "Valor": ">80"
      },
      {
        "Descripcion": "Diámetro",
        "Valor": "200",
        "Unidad": "mm"
      },
      {
        "Descripcion": "Altura",
        "Valor": "95",
        "Unidad": "mm"
      },
      {
        "Descripcion": "Luminous Flux",
        "Valor": "2040",
        "Unidad": "lm (±10%)"
      },
      {
        "Descripcion": "Zócalo",
        "Valor": "E27"
      }
    ],
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  }
]

1 respuesta 1

4

Ya casi lo tienes, lo que debes hacer es volver a usar map() sobre el campo Fotos de cada elemento de tu Array:

let $contenido = json.map(el => {         // <- aquí aplicas map sobre cada elemento de json
  return el['Fotos'].map(foto => {        // <- aquí aplicas map sobre cada elemento de Fotos
    return `<img src="${foto['Foto']}">`  // <- aquí devuelves el template
  }).join("");                            // <- aquí usas join para evitar la separación con coma (separación por defecto si no se usa otro carácter)
});

Usando la estructura mostrada en tu pregunta, podemos ver el siguiente snippet:

// variable de muestra:
let json = [
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  }
];

// el método aplicado sobre la variable de muestra
let $contenido = json.map(el => {
  return el['Fotos'].map(foto => {
    return `<img src="${foto['Foto']}">`
  }).join("");
});
document.querySelector(".lista").insertAdjacentHTML("beforeend", $contenido.join(""));
img{
  width: 100px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lista" class="lista"></div>

Espero que esto aclare tu duda y te ayude a resolver el problema.

EDICIÓN

De acuerdo a tus oportunos comentarios, lo que deseas es mostrar las imágenes de la posición 1 (recordemos que el tipo Array se indexa a partir de cero en ). Si el Array no tiene imagen en la posición 1, entonces no se debe mostrar nada.

Para solucionar esto puedes usar un operador condicional ternario o usar el método filter().

Condicional ternario

Podemos devolver el valor del elemento en la posición 1 del Array de "Fotos" si el mismo existe o devolver una cadena vacía en caso contrario, para ello debemos preguntar si el elemento existe.

Javascript, a diferencia de otros lenguajes, no bota una excepción de índice fuera de rango cuando se intenta acceder a un índice que no está definido en un Array, sino que devuelve undefined. Podemos usar esto en nuestro favor, ya que undefined es un valor falsy, que al ser evaluado en un entorno booleano, devolverá false.

Gracias a este comportamiento podemos escribir un operador condicional ternario, preguntando por el valor del elemento en la posición i de un Array. Si el elemento es distinto de undefined (en realidad si es distinto de cualquier valor falsy) significa que el elemento contiene la url de la imagen (de acuerdo a lo que se recibe en la respuesta).

Así, podríamos tener la siguiente lógica:

let $contenido = json.map(el => {             // <- aquí aplicas map sobre cada elemento de json
  return `${el.Fotos[1] ? `<img src="${el.Fotos[1].Foto}">` : ''}`; // <- operador condicional ternario
});

Así, estamos devolviendo el valor esperado si acaso existe un elemento en la posición 1 del Array de "Fotos" o una cadena vacía en caso contrario.

// variable de muestra:
let json = [
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  }
];

// el método aplicado sobre la variable de muestra
let $contenido = json.map(el => {             // <- aquí aplicas map sobre cada elemento de json
  return `${el.Fotos[1] ? `<img src="${el.Fotos[1].Foto}">` : ''}`; // <- operador condicional ternario
});
document.querySelector(".lista").insertAdjacentHTML("beforeend", $contenido.join(""));
img{
  width: 100px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lista" class="lista"></div>

Usando filter()

También puedes usar filter, para aplicar un filtro sobre los elementos de tu Array de "Fotos" y quedarte sólo con los elementos que tengan más de una foto. Eso te garantiza que podrás acceder sin problemas a la posición 1.

// filtramos por el tamaño del `Array` Fotos
let filtrado = json.filter(el => {
  return el.Fotos.length > 1;
});
// ahora podemos acceder con seguridad al elemento en el índice 1
let $contenido = filtrado.map(el => {
  return `<img src="${el.Fotos[1].Foto}">`;  // <- accedemos sin problemas al elemento en la posición 1
});

Podemos ver este resultado en el siguiente snippet:

// variable de muestra:
let json = [
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201934140434 - Enshine-UFO.png"
      }
    ]
  },
  {
    "Fotos": [
      {
        "Foto": "https://electrobroker.com/admin/fotos/201915150715 - Cengo-ZHN.png"
      },
      {
        "Foto": "https://electrobroker.com/admin/fotos/201922150722 - Cengo-ZHN-100-150-200-240.png"
      }
    ]
  }
];

// filtramos por el tamaño del `Array` Fotos
let filtrado = json.filter(el => {
  return el.Fotos.length > 1;
});
// ahora podemos acceder con seguridad al elemento en el índice 1
let $contenido = filtrado.map(el => {
  return `<img src="${el.Fotos[1].Foto}">`;
});
document.querySelector(".lista").insertAdjacentHTML("beforeend", $contenido.join(""));
img{
  width: 100px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lista" class="lista"></div>

10
  • No estoy ahora con la compu para probarlo pero creo que con tu solucion traeria todas las fotos del array Fotos, yo lo que quiero es iterar sobre Fotos[0] o Fotos[1] segun necesidad, sobre [0] no hay problema porque todos tienen un objeto Fotos pero sobre [1] algunos lo tienen y otros no y ahi salta el undefined. Lo que se me ocurrio mentalmente (no pude probarlo aun en la practica) es poner un condicional que evalue si Fotos[1].Fotos es undefined, en ese caso aplicar un return. estimo puede funcionar. Gracias por tu tiempo @Mauricio Contreras Commented el 9 abr. 2021 a las 11:14
  • 1
    El método map itera sobre todos los elementos del array llamado "Fotos", tanto tenga este 1 o más fotos. El problema se podría presentar cuando no existan fotos en el Array, pero entiendo que esa situación no sucedería. Saludos Commented el 9 abr. 2021 a las 13:22
  • 1
    Pues no te entiendo, ¿deseas mostrar sólo las imágenes de la posición 1? ¿Eso significa que no mostrarás las imágenes de la posición 0 en aquellos elementos que tengan más de 1 imágen? ¿A la vez mostrar las imágenes de los que tengan sólo 1 imagen? Commented el 9 abr. 2021 a las 13:37
  • 1
    Es que mi solución hace eso que planteas, no necesitas un if. Revisa el resultado y te darás cuenta. Saludos Commented el 9 abr. 2021 a las 13:48
  • 1
    Continuemos el debate en el chat. Commented el 9 abr. 2021 a las 13:54

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.