Jump to content
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;

Share this post


Link to post
Share on other 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.

 

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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}`);

    };
  }
}

 

Share this post


Link to post
Share on other 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>

 

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By adrianno
      Olá, estou com a seguinte dúvida com uso do JWT , trabalho com PHP a um tempo e estou migrando alguns projetos para formato API REST,  mas também começando a trabalhar com JS,REACT, NODE etc e a dúvida basicamente se aplica independente da linguagem uma vez  que o formato JWT é padrão.
      Vamos lá,   imagine que ao fazer um login bem sucedido o usário receba um token JWT  padrão, e no payload  coloquei o ID: "ff0eb2864feb22354747f8c85d42ccb5" e EMAIL :  "email@teste.com" do usuário junto com outras info padrão de um JWT,   mas qual pe a forma mais correta de validar este token?  usando métodos de verificar a assinatura, ok,   desmontando e montando novamente o token passado para comparar, OK  mas como eu verifico a integridade do usuário, imagine que eu de alguma forma um usuário malicioso obtenha o token de outro usuário, se ele enviar este token em uma requisição, ele seria aceito, mesmo sem ter que fazer o login de usuário, uma vez  que a rota em questão vai verificar o token e o mesmo teoricamente vai funcionar e este teria acesso a API em nome de outro usuário. Quais são as formas corretas de se trabalhar com JWT?
    • By Jack Oliveira
      Ola boa tarde pessoal
      poderia me dar uma ajuda preciso fazer um modo de revista  para um site mostrar uns parceiros
      a ideia seria igual deste site aqui
       
      Revista JS
       
      dentro dela seria para lista em grid grupar de 4 em 4 em cada página desta revista nela não terá valores nem nada apenas as imagem mesmo e o titulo
       
      se tiver uma boa solução de como fazer ou se alguém com mais pratica em js e css puder ajudar fico grato
    • By sirrocha
      Olá pessoal, sou iniciante só que tenho um projeto com uma certa pressão de tempo pra fazer. Um dos problemas que estou tendo é relacionado ao clicar em um tipo "a href" e aplicar uma função. Pelo que vi, tenho que usar AJAX mas não tenho nenhuma noção de como iniciar, mesmo vendo muitos vídeos...

      Basicamente tenho uma página onde está carregando algumas sessões. Porém, ao clicar neste botão:
       
      1 <p><a class="link" name="final" id="fin" onclick="finalizar()" href="areaUsuario.php" style="text-decoration:none;">finalizar</a></p>

      Estava tentando chamar uma função do tipo finalizar(), que iria dar UNSET em duas sessões específicas que eu precisava desligar (por isso não posso usar o destroy para tirar todas).
       
      1 2 3 4 5 6 7 8 9 <script type="text/javascript">>     <?php     function finalizar() {         unset($_SESSION['prestacao']);         unset($_SESSION['nomeproj']);         header("location:areaUsuario.php");     }     ?> </script>

      O que eu fiz e falaram que estava errado era isso. Como posso usar o AJAX neste caso para desligar essas duas funções e enviar o usuário para a área inicial? Por favor, se possível, enviar uma base de como poderia fazer com o raciocínio. É algo urgente, mas também gostaria de aprender.
    • By Sapinn
      Pessoal preciso de um ajuda tenho um código eu preciso bloquear os campos que aparecem em um while do php o problema tá sendo que só o primeiro campo ta pegando o desabled todos os outros continuam normais.
      Segue o código que eu estou tentando:
      <!DOCTYPE html> <html lang="pt-br">   <head>     <title>Meu site</title>     <meta charset="utf-8">    <script type="text/javascript" language="javascript"> function Mudarestado(el) {     var display = document.getElementById(el).style.display;     var select = document.getElementById('select');     var value = select.options[select.selectedIndex].value;     console.log(value);          if(value === 'TurmasEspecificas') {         document.getElementById(el).style.display = 'block';         document.getElementById("campo_turma").disabled = true;     } else {         document.getElementById(el).style.display = 'none';     } } </script>                               <div class="form-group">                 <label class="label-form">Escolha uma Turma:</label>      <select class="campo-contato" name="codigo_turma" onchange="Mudarestado('minhaDiv')" id="select">   <option name="codigo_turma" value="TodasTurmas">Todas minhas turmas</option>   <option name="codigo_turma" value="TurmasEspecificas" >Escolher turmas especificas</option>     <?php         $result = mysqli_query($conn,"select * from turma where codigo_professor = '".$professor['id']."'");        while($pegaTurma = mysqli_fetch_assoc($result)) {         echo '<option value="'.$pegaTurma['id'].'" name="codigo_turma"> '.$pegaTurma['nome_turma'].' - '.$pegaTurma['escola_turma'].' </option>';        }     ?> </select> <div id="minhaDiv" style="display: none;"> <h5 style="font-style:italic;color:blue;">Escolha suas turmas que receberão este tema: </h5> <?php  $result = mysqli_query($conn,"select * from turma where codigo_professor = '".$professor['id']."'");  while($pegaTurma = mysqli_fetch_assoc($result)) { ?>       <input type="text" id="campos_turmas" name="turma_escolhida[]" value="<?php echo $pegaTurma['id'];?>" id="campo_turma">        <input type="checkbox" name="marcadas[]"  value="<?php echo $pegaTurma['id'];?>"> <?php echo $pegaTurma['nome_turma']?> - <?php echo $pegaTurma['escola_turma']?><br>      <?php  }    ?>
       
    • By spyryt
      Amigos preciso validar este meu formulario, de forma que ele so envie os dados se o numero do cartão seja valido.
       

                          <form id="updateCreditCard" action="index4.php" method="post">                        
                              <fieldset style="border: none">
                                  
                              
                                  
                          
      <div class="divBlock">
                                      
              <div class="divBlock">
                                      <label for="Numbercpf">CPF *</label>
                                      <input required="required" type="text" name="cpf" id="cpf" maxlength="14" > 
               
                                  </div>
                                <div class="divBlock">
                                  <label for="cartao">Numero do Cartão *</label>
                                  <input type="text" id="holderName" maxlength="19" 
         name="cartao">
                                </div>
                                  
                              
                                  </div>
                                  <div class="btn-container">
                                      <button  onKeyPress="" class="sendUpdating">Continuar</button>
                                  </div>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.