Jump to content
Hozana

alimentar uma lista com arquivo txt usando ajax

Recommended Posts

Ola, bom dia!!

pessoal preciso de ajuda!

 

tenho a seguinte lista criada no html, ela não esta completa, só p vcs entenderem.

 

<ul class="lista">                                            
                        <li>Datetime:</li>
                        <li>Velocidade:</li> 
                        <li>$ Inicial:</li> 
                        <li>$ Atual: </li>
                        <li>$ Financ: </li>
                        <li>% Neil: </li> 
                        <li>% Financ: </li> 
                        <li>% Ultimo: </li> 
                        <li>Estado: </li> 
                        <li>QDT Trade: </li> 

 

e tenho no JS isso( peguei em um tutorial, e acho que é disso que eu preciso

 

var numsList = [];
$.ajax( 'Input.txt', {
    dataType: 'text',
    success: function(response){
        //response é o conteudo do Input.txt
        var lines = response.split('\n'); //quebra o arquivo em linhas, 
        for(var i in lines){
            var row = lines;
            var nums = row.split(','); //quebra a linha em valores separdos por virgula
            for(var j in nums){
                var num = parseInt(nums[j]); //converte o valor para int
                if( !isNaN(num) ) //basicamente verifica se é um numero
                    numsList.push(num); //adiciona o item no array
            }}

        console.log(numsList);
    }
});

 

Tenho também um arquivo txt(Input.txt) com algumas informações separadas por virgula.

O que quero é alimentar a lista com as informações do arquivo txt, mas coloca-los na posição correta

 

por exemplo

eu Tenho o 1º item da lista Datatime:  e dentro dele quero colocar o primeiro item do arquivo

mas não sei como chamar o JS  no HTML.

 

 

Desde ja Obrigada.

Share this post


Link to post
Share on other sites

Com duas linhas em jQuery tu faz:

let listItems = $('.list').children()
$.get("./files/input.txt", data => listItems.map( (i, cv) => cv.append(data.split(',')[i])))

Ou com JS Puro:

fetch("./files/input.txt")
.then(resp => resp.text().then(text => {
        document.querySelectorAll('#list li').forEach(( li, index ) => {
            li.append(text.split(',')[index])
        })
    })
)

 

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 Danelelel
      Código php
       
      <?php
      error_reporting(0);
      session_start();
      include "gdrive/curl_gd.php";
      require('profile.php');
      require('../conexao/conexao.php');
      $tokenC   = $_SESSION['token'];
      $explod = explode('idMC', $tokenC);
      $idCont = explode('id', $explod[0]);
      $idConta = $idCont[1];
      $idMembro = $explod[1];
      $idM  = $idMembro;
      $id   = mysqli_real_escape_string($conn, $_GET['id']);
      $retry   = mysqli_real_escape_string($conn, $_GET['retry']);
      $epid      = mysqli_real_escape_string($conn, $_GET['epid']);
      $quality = mysqli_real_escape_string($conn, $_GET['quality']);
      $vide = mysql_query("SELECT * FROM `vid_flix` WHERE id='$id'");
      $vid  = mysql_fetch_assoc($vide);
      if($vid['tipo'] == 2){
          if($quality == NULL or $quality == "medium"){
              $link = $vid['link'];
          }elseif($quality == "high"){
              $tokenC   = $_SESSION['token'];
              $explod = explode('idMC', $tokenC);
              $idCont = explode('id', $explod[0]);
              $idConta = $idCont[1];
              $idMembro = $explod[1];
              $cons = mysql_query("SELECT * FROM `login_flix` WHERE id='$idConta'");
              $consult = mysql_fetch_assoc($cons);
                  $vip = $consult['vip'];
                  if($quality == "high" && $vip == "1"){
                      $link = $vid['link'];
                  }else{
                      $link = "No Permit";
                  }
          }
          $titulo = $vid['titulo'];
          $bg     = $vid['bg'];
          $bg       = str_replace("w227_and_h127_bestv2", "original", $bg);
          $bg       = str_replace("w533_and_h300_bestv2", "original", $bg);
          $id = $vid['id'];
          $type=$vid['tipo'];
          $gdrive = $vid['gdrive'];
      }
      if($vid['tipo'] == 1){
          
          $video = mysql_query("SELECT * FROM `ep_flix` WHERE epId='$epid'") or die(mysql_error());
          $ep    = mysql_fetch_array($video) or die(mysql_error());
          
          $titulo      = $vid['titulo'].' : '.$ep['titulo'];
          $bg       = str_replace("w227_and_h127_bestv2", "original", $ep['img']);
          $bg       = str_replace("w533_and_h300_bestv2", "original", $ep['img']);
          $bg       = $bg;
          $dub       = $vid['leg_dub'];
          $service  = $vid['service'];
          
              $link     = $ep['link'];
         
          $gdrive = $ep['gdrive'];

          $id = $vid['id'];
          $type=$vid['tipo'];
          $epid = $epid;

          //PROXIMO EP//
           $epAt  = $ep['ep'];
           $tempAt = $ep['temp'];
           $nextEp = $epAt + 1;
          
          $p = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempAt' && ep='$nextEp'");
          $c1 = mysql_num_rows($p);
        
          if($c1 > 0){
              $epATT = mysql_fetch_assoc($p);
              $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
          }elseif($c == 0){
              $tempNext = $tempAt + 1;
              $pp = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempNext' && ep='1'");
              $cc = mysql_num_rows($pp);
              if($cc > 0){
                  $epATT = mysql_fetch_assoc($pp);
                      $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
                  
              }
          }
          //PROXIMO EP//
          $linkTest = $ep['link'];
          
      }
         
      $user = mysql_query("SELECT * FROM `perfil_flix` WHERE idMC ='$idMembro'");
      $u = mysql_fetch_array($user);
      $nome = $u['nome'];
      $color = $u['color'];
      $icon = $u['icon'];
      if($gdrive == '1'){
              $url = $link;
              $gid = get_drive_id($url);
              
              $iframeid = my_simple_crypt($gid);
              $linkdown = Drive($url);
              $fileG = $iframeid;
              $link = $linkdown;
      }
      ?>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="css/video-play.css">
      <div class="chat hid">
          <div class="view">
          

          </div>
          <div class="text-chat">
              <input type="text" id="chat-value" class="chat-value" name="chat-value" placeholder="...">
              <button class="mic" id='mic'><i class="fas fa-microphone"></i></button>
          </div>
      </div>
      <div class="media"></div>
      <?php
      if($gdrive != 2){
      if($link != "No Permit"){
      ?>
      <script type="text/javascript">
          var vidLink     = "<?=$link?>";
          var titlevid     = "<?=$titulo?>";    
          var poster         = "<?=$bg?>";
          var nextEpp     = "<?=$proxEp?>";
      </script>
      <script src="flipclock/flipclock.js"></script>
      <script src="js/play.js"></script>
      <script type="text/javascript">
          
          var retryLoad =     setInterval(function(){
              var statusvid = vid.readyState;
               if(statusvid == '4'){
                  var dura = vid.duration;
                  var time = '<?=$retry?>'/100*dura;
                  vid.currentTime = time;
                  clearInterval(retryLoad);
              }
          },50);
          
                  setInterval(function(){
              $.ajax({
                type: "POST",
                url: "../player/function/savep.php",
                data: {
                    'idf' : "<?=$_GET['id']?>",
                    'temp': progress,
                    'idm' : '<?=$idM?>'
                  },
                dataType: 'json',
                success: function (data) {
                          
                      }
              });
                  },10000);
      </script>
      <?php }else{
          ?>
          <script type="text/javascript">
              $('.media').html("<center style='color:white;'>Para ter acesso ao Recurso HD é necessario ser membro vip.</center>");
          </script>
          <?
      } ?>
      <script type="text/javascript">
          function nextEp(){
              $('.nextEp').click(function(){
                  location.href="<?=$proxEp?>";
              });
              }
          setInterval(function(){
              $('.chat .view').load("chat-view.php?id=<?=$id?>");
          },500);
          $('.chat-value').on('keyup',function(e){
              var code = (e.keyCode ? e.keyCode : e.which);
                  if (code==13) {
                      var msg = $(this).val();
                      var user= "<?=$nome?>";
                      var cor = "<?=$color?>";
                      var icon= "<?=$icon?>";
                      var id_vid= "<?=$id?>";    
                      $.ajax({
                            type: "POST",
                            url: "cadXat.php",
                            data: {
                                'id_vid':id_vid,
                                'msg' : msg,
                                'user': user,
                                'cor' : cor,
                                'icon':icon
                              },
                            
                      });
                      $(this).val("");
                  }
          });
          $('.smstext').click(function(){
              var hidC = $('.chat').hasClass("hid");
              if(hidC == true){
                  $('.chat').removeClass("hid");
              }else if(hidC == false){
                  $('.chat').addClass("hid");
              }
          });
          function toggleMute(element) {
          element.muted = false;
          element.play()
      }
      window.addEventListener('load', function () {
          setTimeout(function () {
              toggleMute(document.querySelector('video'));
          }, 1000);
      });
      </script>
      <style type="text/css">
          .chat{
              height: calc(98vh - 12%);
          }
          @media screen and (max-width: 800px){
              .chat{
              height: calc(98vh - 22%);
          }
          }
          @media screen and (max-width:  500px){
              .chat{
                  width: 60%;
              }
          }
          @media screen and (max-width:  350px){
              .chat{
                  width: 70%;
              }
          }
      </style>
      <?php }else{
          ?>
          <script type="text/javascript">
              $('.media').html('<iframe src="<?=$link?>"></iframe>');
          </script>
          <style type="text/css">
              .media iframe{
                  width: 100%;
                  float: left;
                  height: 100vh;
                  border:transparent;
              }
          </style>
          <?
      } ?>
       
      Codigo arquivo js
       
          $('.media').append('<div class="play-video"></div>');
          $('.play-video').append('<div class="loading"></div>');
          $('.play-video').append('<div class="header"></div>');
          $('.header').append('<div class="info"><div>');
          $('.info').append('<div class="line-time"><div>');
          $('.line-time').append('<input type="range" class="line-control" min="0" max="100" value="0" onmousedown="line()" onclick="line()" onchange="line()">');
          $('.line-time').append('<div class="line-curren"></div>');
          $('.line-time').append('<div class="line"></div>');
          $('.line-time').append('<div class="line-time-slide"></div>');
          $('.info').append('<div class="time">0:00:00</div>');
          $('.info').append('<div class="controls-vid"></div>');
          $('.controls-vid').append('<button class="play_pause"><i class="material-icons">play_arrow</i></button>');
          $('.controls-vid').append('<button class="vol-slide"><i class="material-icons">volume_up</i></button>');
          $('.controls-vid').append('<button class="expand"><i class="material-icons">fullscreen</i></button>');
          
          $('.controls-vid').append('<span class="title-vid">'+titlevid+'</span>');
          $('.info').append('<div class="volup hid"><vid>');
          $('.volup').append('<input type="range" onkeyup="vol()" onmousedown="vol()" onclick="vol()" onchange="vol()" min="0" max="100" value="70" class="volups">');
          $('.volup').append('<div class="seta-baixo"></div>');
          $('.play-video').append('<div class="encript"></div>');
          $('.play-video').append('<div class="video-play"></div>');
          $('.header').append('<button class="playing-vid"><i class="material-icons">play_arrow</i></button>');    
          $('.video-play').append('<video id="vid-nf" poster="'+poster+'"></video>');
          $('#vid-nf').append('<source src="'+vidLink+'" type="video/mp4">');
          
          var vid = document.getElementById("vid-nf"); 
          function line(){
              var val =     $('.line-control').val();
              var durational = vid.duration;
              var por = val / 100 * durational;
              vid.currentTime=por;
          }
          $('.play_pause').click(function(){
              var play = $('.play_pause i').html();
              
              if(play == "play_arrow"){
                  $('.play_pause i').html('pause');
                  $('.playing-vid i').html('pause');
                  vid.play();
              }if(play == "pause"){
                  $('.play_pause i').html('play_arrow');
                  $('.playing-vid i').html('play_arrow');
                  vid.pause();
              }
          });
          $('.playing-vid').click(function(){
              var play = $('.play_pause i').html();
              
              if(play == "play_arrow"){
                  $('.play_pause i').html('pause');
                  $('.playing-vid i').html('pause');
                  vid.play();
              }if(play == "pause"){
                  $('.play_pause i').html('play_arrow');
                  $('.playing-vid i').html('play_arrow');
                  vid.pause();
              }
          });
          setInterval(function(){
              var statusvid = vid.readyState;
              if(statusvid == '0'){
                  $('.loading').css('display','block');
              }else if(statusvid == '1'){
                  $('.loading').css('display','none');
              }else if(statusvid == '2'){
                  $('.loading').css('display','block');
              }else if(statusvid == '3'){
                  $('.loading').css('display','none');
              }else if(statusvid == '4'){
                  $('.loading').css('display','none');
              }
          },50);
          $('.expand').click(function(){
              var expand = $('.expand i').html();
              if(expand == 'fullscreen'){
                  $('.expand i').html('fullscreen_exit');
                  var el = document.documentElement
                      , rfs = // for newer Webkit and Firefox
                             el.requestFullScreen
                          || el.webkitRequestFullScreen
                          || el.mozRequestFullScreen
                          || el.msRequestFullScreen
                      ;
                      if(typeof rfs!="undefined" && rfs){
                        rfs.call(el);
                      } else if(typeof window.ActiveXObject!="undefined"){
                        // for Internet Explorer
                        var wscript = new ActiveXObject("WScript.Shell");
                        if (wscript!=null) {
                           wscript.SendKeys("{F11}");
                        }
                      }
              }else{
                  $('.expand i').html('fullscreen');
                  if (document.cancelFullScreen) {  
                    document.cancelFullScreen();  
                  } else if (document.mozCancelFullScreen) {  
                    document.mozCancelFullScreen();  
                  } else if (document.webkitCancelFullScreen) {  
                    document.webkitCancelFullScreen();  
                  }
              }
          });
          $( document ).ready(function() {
               var regiao = document;
              var timeout = setTimeout(showTela, 4000);
              $(regiao).mousemove(onEvent);
              $(regiao).mousedown(onEvent);
              $(regiao).keydown(onEvent);

              function onEvent() {
                clearTimeout(timeout);
               
                  $('body').css('cursor','auto');
                $('.header').css('opacity','1');
                timeout = setTimeout(showTela, 4000);
              }
              function showTela() {
                $('body').css('cursor','none');
                $('.header').css('opacity','0');
              }
            
             });
              $('.vol-slide').click(function(){
                  var hid = $('.volup').hasClass('hid');
                  if(hid == true){
                      $('.volup').removeClass('hid');
                      $('.line-time').addClass('hid');
                      $('.time').addClass('hid');
                  }else if(hid == false){
                      $('.volup').addClass('hid');
                      $('.line-time').removeClass('hid');
                      $('.time').removeClass('hid');
                  }
              });
              function vol(){
                  var volu = $('.volups').val();
                  var vol = volu / 100;
                  if(volu < 50){
                      $('.vol-slide i').html('volume_down');
                  }
                  else if(volu > 50){
                      $('.vol-slide i').html('volume_up');
                  }
                  if(volu == 0){
                      $('.vol-slide i').html('volume_off');
                  }
                  vid.volume = vol;
              };
              var progress = '';
              var per = '';
              var clo = '60';
              var clou = '';
              setInterval(function(){
                  var current = vid.currentTime;
                  var duration= vid.duration;
                   per =  duration - current ;
                  var percorid = current * 100;
                   progress = percorid / duration;
                  $('.line').css('margin-left', 'calc('+progress+'% - 8.5px)');
                  $('.line-curren').css('width',progress+'%');
                  
                  var dur = String(duration);
                  var perc = String(per);
                  if(dur != 'NaN'){
                      var date = new Date(null);
                      date.setSeconds(perc); // specify value for SECONDS here
                      var result = date.toISOString().substr(12, 7);
                  $('.time').html(result);
                  if(per < '30' && nextEpp != ''){
                      if(clou == ''){
                          clou = '1';
                          $('.header').append('<button class="nextEp"><i class="material-icons">play_arrow</i><p>Próximo Episódio em</p><span class="restTime"></span></button>');
                          $('.info').addClass('hid');
                          $('.playing-vid').addClass('hid');
                          nextEp();
                      }
                  }
                  }
              },50);
                  var mytimer = setInterval(function(){
                      if(per < '30' && nextEpp != ''){
                          $('.restTime').html(clo);
                          if(clo > 0){
                              clo --;
                          }else if(clo == 0){
                              location.href=nextEpp;
                              clearInterval(mytimer);
                          }
                      }
                      },1000);
              
              $('.settings').click(function(){
                  var check = $('.settings').hasClass('active-s');
                  if(check == true){
                      $('.settings').removeClass('active-s');
                      $('.line-time').fadeIn('slow').css('display','block');
                      $('.time').fadeIn('slow').css('display','block');
                      $('.quality').fadeOut('slow').css('display','none');
                  }else if(check == false){
                      $('.settings').addClass('active-s');
                      $('.line-time').fadeOut('slow').css('display','none');
                      $('.time').fadeOut('slow').css('display','none');
                      $('.quality').fadeIn('slow').css('display','block');
                  }
              });
              
    • By Jefferson andre
      Saudações mestres,
       
      Como faço para ajustar o programa abaixo para calcular a diferença entre duas variaveis que armazenam horario no ajax quando ocorre um evento onblur?
       
      O programa funciona com numeros mas nao com tempo, depois que eu pegar a diferenca entre os horarios quero multiplicar por uma terceira variavel.
       
      <html> <body> <script> function calcular() { var num1 = Number(document.getElementById("hora_saida").value); var num2 = Number(document.getElementById("hora_entrega").value); var elemResult = document.getElementById("resultado"); if (elemResult.textContent === undefined) { elemResult.textContent = "O resultado eh " + String(num1 + num2) + "."; } else { // IE elemResult.innerText = "O resultado eh " + String(num1 + num2) + "."; } } </script> <label>Horario de saida</label> <input type ="time" name="hora_saida" id="hora_saida"onblur="calcular();"> <label>Horario da entrega</label> <input type ="time" name="hora_entrega" id="hora_entrega"onblur="calcular();"> <div id="resultado"></div> <span id="resultado"></span> </body> </html>  
    • By ThosuZ
      Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc").
       
      Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo?
       
      HTML:
       
      <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS:
      /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; }  
      Como ficou:

       
      Como eu gostaria que ficasse mais ou menos:
      http://miritigrafica.com.br/#faleconosco
    • By WagnerFilho
      Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda!
      Eu separei os arquivos js por responsabilidades.
      Cada arquivo será encarregado para uma determinada função.
      Estou carregando estes arquivos da seguinte forma:

       
      <html> <head> </head> <body> <div id="app-info"> <span id="app-name">name</span> </div> <script src="controllers/controllerExample.js"></script> <script src="resources/ajaxApp.js"></script> <script src="models/modelExample.js"></script> <script src="app.js"></script> </body> </html> observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern
      Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ?
      Como posso fazer isto ?
      Então tenho alguns arquivos js.
       
      app.js controllers / controllerExample.js models / modelExample.js resources / ajaxApp.js
        app.js
      let ObjectApplication = {}; ;(function( window, document, undefined ) { 'use strict'; function app() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.app = app(); })( window, document ); MyGlobalObject.controllerExample.publicMethod(); console.log(objectApplication.name);  
      controllerExample.js
      ;(function( window, document, undefined ) { 'use strict'; function controllerExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return MyGlobalObject.modelExample.publicMethod(); //return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.controllerExample = controllerExample(); })( window, document );  
      modelExample.js
      ;(function( window, document, undefined ) { 'use strict'; function modelExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { buildAppInfo(); //return 'Init in Model'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.modelExample = modelExample(); })( window, document );  
      ajax
      let buildAppInfo = () => { let url = 'app.json'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status = 200) app = JSON.parse(xhr.responseText); console.log(app); } } xhr.send(); };
       
    • By Motta
      As 7 linguagens de programação que você deve aprender em 2020
×

Important Information

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