Ir para conteúdo
mpcarvalho

Matriz através de valores de uma input

Recommended Posts

Possuo pouco conhecimento em JS, então gostaria de solicitar uma ajuda com um script que montei para resgatar imagens de produtos de um determinado site/ecommerce utilizando o EAN do produto.

 

No código abaixo eu passo via form alguns parametros como a URL do site onde quero pesquisar a imagem com "/" e na sequência o campo EAN com todos os códigos de barra que quero pesquisar separados por "," e por ultimo a extensão do arquivo de acordo com a extensão que o site em questão utiliza, jpg ou png. No final tudo será exibido na div dl_imgs e ai então eu posso dar um ctrl + s no meu navegador e salvar todas as imagens de uma vez. 

 

O objetivo do FOR é retornar imagem por imagem utilizando os parametros URL + EAN + EXT. Ex: "ecommerce.com.br/imagens/000030201.png".

 

O que acontece é que preencho o campo EAN com todos os códigos de barras que preciso separados por virgula, mas o script não consegue montar o array e me retorna algo parecido com isso: https://cdn-*******.*******.com.br/products/7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589

 

Como podem ver me trás apenas uma imagem que não existe pois não separou os códigos de barra na matriz. Porem se eu copiar esses mesmos códigos e colocar direto na VAR MATRIZ, o script funciona. 

 

Segue abaixo o script utilizado. Desde já agradeço!

 

<script>
        function loadImgs(){
          /*--- Dados do formulário ---*/
          var dataform = document.forms[0] || document.forms['dados'];
          //var t = dataform.imgtotal.value;
          var url = dataform.url.value;
          var ext = dataform.ext.value;

          var ean = dataform.ean.value;
          dataform.buscar.disabled = true;
            
          /*--- Gerar IMGS ---*/
          var div = document.getElementById('dl_imgs') || document.dl_imgs;
          div.innerHTML = "";

          novoArray = ean.split(',');
          var matriz = [novoArray];
            
         for(var i=0; i<matriz.length; i++) {
               div.innerHTML += '<img src="'+url+""+matriz+''+ext+'" />';
         }

}
</script>

 

PS: Para melhorar ainda mais essa extração, eu gostaria de fazer isso fazendo um UPLOAD de um arquivo XLS contendo 2 colunas EAN e Nome produto, e no final exibir a imagem e abaixo o nome do produto, se alguém puder me dar uma luz de como fazer isso agradeço. Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

@mpcarvalho Eu achei dois problemas na sua função

 

Um, é logo após você separa a string dá variável ean usando o split. Você converte aquela string em um array dividindo a string com base na virgula e depois você salva o resultado dá divisão na variável novoArray, porem você acaba salvando o arrray em um array com uma unica coluna. Quando você coloca a variável novaArray entre [ ], você acaba colocamo um array dentro de outro.

 

Debug:

Valor ean = "7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589";

novoArray = ean.split(',');
var matriz = [novoArray];

// Resultado do Valor na variável "matriz":
Tipo: object;
Numero de colunas: 1;
Valor:
[
0:["7896003703863", "7897005100223", "7897005101589", "7896360210097", "7896003703863", "7897005100223", "7897005101589"]
]

 

Quando você utilizar o for na variável matriz ele vai pegar o valor da unica coluna que o array possui e vai converter o valor dessa coluna que é um array para uma unica string. Por isso ele retorna aquela string, como se ele nem executasse uma operação nela.

 

O segundo é quando você concatena os valor e coloca dentro de uma div. Você não seleciona o índice do array que você está fazendo o loop. Isso também vai fazer com que ele retorna aquela string, como se ele nem executasse uma operação nela.

 

Para corrigir isso, bastas usar o valor dá variável novaArray no seu for ou caso você queira salvar o valor na variável matriz, você colocar o valor sem está entre [ ].

 

Exemplo:

novoArray = ean.split(',');
           
for(i = 0 ; i < novoArray.length; i++)
{
	div.innerHTML += '<img src="'+url+""+novoArray[i]+''+ext+'" />';
}

// Ou 

novoArray = ean.split(',');
var matriz = novoArray.slice();
           
for(i = 0; i < matriz.length; i++)
{
	div.innerHTML += '<img src="'+url+""+matriz[i]+''+ext+'" />';
}

Você também pode encurtar o for usando um for/in.

 

Exemplo:

novoArray = ean.split(',');
           
for(indice = novaArray)
{
	div.innerHTML += '<img src="'+url+""+novaArray[indice]+''+ext+'" />';
}

 

Obs..:No javascript o array são objetos. E objeto são atribuídos por referência. Seja com o uso do igual, seja através de passagem de argumento em uma função.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@gabrielms Muito obrigado, além de ter entendido com clareza sua explicação agora meu script funcionou perfeitamente. 

Estou quebrando a cabeça com outra coisa agora: Quero obter o tamanho "real" da imagem que estou buscando no link e criar um condicional quando a altura for igual a 0px a imagem não seja exibida, e caso for mair que 0px ai sim possa ser exibida. Isso porque quando começo a executar os códigos algumas imagens não são encontradas e retorna com aquela imagem padrão de erro. Já achei diversos códigos na internet que me possibilitou obter o tamanho real da imagem, mas quando tento criar a condicional não funciona.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@gabrielms Agora gerou outro problema, as imagens estão vindo duplicadas, vou inserir abaixo o script como ficou.

 

function loadImgs() {
  /*--- Dados do formulário ---*/
  var dataform = document.forms[0] || document.forms['dados'];
  //var t = dataform.imgtotal.value;
  var url = dataform.url.value;
  var ext = dataform.ext.value;
  dataform.buscar.disabled = true;

  /*--- Gerar IMGS ---*/
  var div = document.getElementById('dl_imgs') || document.dl_imgs;
  div.innerHTML = "";

  var ean = dataform.ean.value;

  novoArray = ean.split(',');

  for (var i = 0; i < novoArray.length; i++) {

    urlImg = url + novoArray[i] + ext;

    let img = document.createElement('img');

    img.src = urlImg;

    img.onload = function () {
      div.innerHTML += '<div onclick="removerImage(this)" class="dl_imgs-wrap"><img class="imgs" id="" src="' + img.src + '" /><p style="width: 230px; float=: left; font-size: 12px; margin:0px; margin-top:5px;">'+img.width+" x "+img.height+'<span style="float:right;"></span></p></div>';
      //alert(`Image loaded, size ${img.width}x${img.height}`);

    };
  }
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@mpcarvalho Eu não encontrei esse erro de duplicata, mas pode ser um problema de duplo click.

 

Uma coisa que eu notei, é que você acaba criando dois elemento img. Você cria o elemento img e depois adiciona um src(link) e um evento de onload, que está funcionado sem problemas, porem quando você vai adicionar na div, você acaba criando outro elemento img sem a necessidade.

let img = document.createElement('img'); // Primeiro elemento img
div.innerHTML += `
<div onclick="removerImage(this)" class="dl_imgs-wrap">
  <img class="imgs" id="" src="${img.src}" /><!-- Segundo elemento img-->
  <p style="width: 230px; float=: left; font-size: 12px; margin:0px; margin-top:5px;">${img.width} x ${img.height}<span style="float:right;"></span></p>
</div> `;

 

Eu fiz um exemplo para caso você queira dar uma olhada: https://codepen.io/morto/pen/pozgwZJ

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<title>IMG LOAD</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://kit.fontawesome.com/a076d05399.js"></script>
		<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
		<style>
			html, body{
				width: 100%;
				height: 100%;
				padding: 0px;
				margin: 0px;
				background: #323232;
				font-family: 'Roboto', sans-serif;
				overflow-y: hidden;
			}

			div.container{
				overflow-y: auto;
				display: block;
				height: 100%;
			}

			#demo{
				padding: 20px;
				display: flex;
  				flex-wrap: wrap;
				text-align: center;
				align-content: center;
				justify-content: center;
			}

			#demo > div{
				width: 240px;
				height: 240px;
				padding: 5px;
				background: #242424;
				overflow: hidden;
				margin: 10px;
				text-align: center;
				overflow-wrap: break-word;
				color: #fff;
			}

			#demo > div > img{
				width: 100%;
				height: 100%;
				margin: 0px;
			}

			a.btn{
				font-size: 36px;
				text-decoration: none;
				color:#ccc;
				text-align: center;
			}

			div.modal{
				display: none;
				position: fixed;
				z-index: 1;
				padding-top: 100px;
				left: 0;
				top: 0;
				width: 100%; 
				height: 100%; 
				overflow: auto; 
				background-color: rgb(0, 0, 0); 
				background-color: rgba(0, 0, 0, 0.9); 
			}

			div.modal > div.modal-container{
				margin: auto;
				display: block;
				width: 80%;
				max-width: 720px;
			}
			
			form[name="pesquisar"]{
				background: #191919;
				color: #fff;
				padding: 20px;
				display: block;
			}

			form[name="pesquisar"] > div > label{
				width: 100%;
				margin: 0px;
				padding: 0px;
				border: 0px;
			}

			form[name="pesquisar"] > div > input{
				margin: 5px 0px;
				padding: 5px 0px;
				border: 0px;
				width: 100%;
			}

			div.modal-container, #demo > div{ 
				animation-name: zoom;
				animation-duration: 0.6s;
			}

			@keyframes zoom{
				from {
					transform:scale(0)
				} 
				to {
					transform:scale(1)
				}
			}

			.btn-close{
				position: absolute;
				top: 15px;
				right: 35px;
				color: #f1f1f1;
				font-size: 40px;
				font-weight: bold;
				transition: 0.3s;
			}

			.btn-close:hover, .btn-close:focus{
				color: red;
				text-decoration: none;
				cursor: pointer;
			}

			@media only screen and (max-width: 720px){
				div.modal-container{
					width: 100%!important;
				}
			}


		</style>
	</head>
    <body>
		<div style="text-align: center; padding: 10px; background: #191919;">
			<a href="javascript:void(0)" onclick="document.getElementsByClassName('modal')[0].style.display = 'block';" class="btn open"><i class="far fa-file-image"></i> Carregar imagens</a>
			<a href="javascript:void(0)" style="display: none;" class="btn load" ><i class="fas fa-sync fa-spin" style="font-size:24px"></i> Carregando...</a>
		</div>
		<div class="container">
			<div id="demo">
			</div>
		</div>
		<div class="modal">
			<span class="btn-close" onclick="document.getElementsByClassName('modal')[0].style.display = 'none';" ><i class="fas fa-times"></i></span>
			<div class="modal-container">
			<form onsubmit="return false;" name="pesquisar">
				<div>
					<label>URL: </label>
					<input type="text" name="url" placeholder="URL do local das imagens, Exemplo: https://menusite.com/fotos/ "><br>
					<label>Imagens: </label>
					<input type="text" name="imagens" placeholder="Complemento dá url mais o nome e tipo da imagem, Exemplo: fotos1.jpg, fotos2.jpg "><br>
					<input type="submit" value="Carregar">
				</div>
			</form>
			</div>
		</div>
		<script>

			var demno, form;

			const verificador = {
				loop : null,
				elementoCerregados : 0,
				elementNumero : 0,
				elementErro : 0,
				verificar : function(x, y){
					document.getElementsByClassName("open")[0].style.display = "none";
					document.getElementsByClassName("load")[0].style.display = "block";
					this.elementoCerregados = y;
					this.elementNumero = x;
					this.loop = setInterval(function(){
						if(verificador.elementoCerregados == verificador.elementNumero)
						{
							document.getElementsByClassName("load")[0].style.display = "none";
							document.getElementsByClassName("open")[0].style.display = "block";
							clearInterval(verificador.loop);
							verificador.loop = null;
							verificador.elementoCerregados = 0;
							verificador.elementErro = 0;
							verificador.elementNumero = 0;
						}
					}, 1000);
				}
			}

			window.onload = function()
			{
				form = document.forms["pesquisar"];
				demno = document.getElementById("demo");

				form.addEventListener("submit", function(event)
				{
					let
						url = form["url"].value,
						imagens = form["imagens"].value;

					event.preventDefault();

					url.trim();
					imagens.trim();
					
					if(url == "")
					{
						return false;
					}

					if(imagens == "")
					{
						return false;
					}

					imagens = imagens.split(',');

					if (typeof imagens != "object" || imagens.length < 1)
					{
						return false;
					}
					
					carregarImgs(url, imagens);

					return false;
				});
			}

			function carregarImgs(url, imagens)
			{
				document.getElementsByClassName('modal')[0].style.display = "none";
				elmentosCarregados = 0;
				verificador.verificar(imagens.length, 0);

				for (i in imagens){
					let
						elemtentImg = document.createElement("img");
						tempo = i * 500;

					elemtentImg.setAttribute("delay", tempo);

					elemtentImg.onerror = function(){
						let elementDiv = document.createElement("div");
						elementDiv.innerHTML = ("Ocorreu um erro no load dessa Imagem : "+this.src);
						setTimeout(function(){
							demno.appendChild(elementDiv);
							verificador.elementoCerregados++;
						}, this.getAttribute("delay"));
						verificador.elementErro++;
					}

					elemtentImg.src = url + imagens[i];

					elemtentImg.onload = function()
					{
						let elementDiv = document.createElement("div");
						elementDiv.appendChild(this)
						setTimeout(function(){
							demno.appendChild(elementDiv);
							verificador.elementoCerregados++;
							elemtentImg.removeAttribute("delay");
							
						}, this.getAttribute("delay"));
					}

				}

			}

		</script>
    </body>
</html>

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • Por Alessandro Bodão
      Salve galerinha, passando pra mostrar pra vocês o novo projeto de marca que a Jatobá Estúdio desenvolveu, espero que gostem.   https://www.behance.net/gallery/166555627/Fernanda-Pinheiro-Nutricionista-Esportiva
    • Por rogerblower
      Boas pessoal, estou precisando de um calendário para agenda com crud para agendamento, mas teria que ser free.
      Obrogado.
    • Por Sapinn
      Fala galera! Tenho um site que possui alguns icones que são puxados da biblioteca flaticon , o problema é que de uma hora pra outra esses icones pararam de aparecer. No meu ambiente local funciona, mas no ambiente de produção eles não aparecem e eu recebo o seguinte erro no console: Failed to load resource: the server responded with a status of 404 () 
       
      Alguém saberia como resolver isso?
    • Por mateus.andriollo
      Carrego um conteudo Ajax e junto com ele vem HTML e JS, existe um marcador que está relacionado a um elemento HTML, quando eu clico e este elemento tem um atributo exemplo data-onload="funcaoOla()" esta função tbm carregada pelo ajax deve ser executada.
       
      Dúvida como eu faço uma chama de função desta forma, seria como exec("funcaoOla")
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.