Take external json data, list, and save to webstorage

Asked

Viewed 94 times

0

Personal I am trying to get the data via json besides to list I want to save in the browser, more I am not getting if someone can help me follow the code

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
    <title>Tutorial Web App</title>

    <!-- Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet">

  </head>
  <body>
    <h1>Listar objetos</h1>

    <ul class="list-group">
        
    </ul>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap.js"></script>

    <script>    
        $(function(){
            var objetos = JSON.parse(window.localStorage.getItem('objetos'))
			
			
         //window.localStorage.removeItem('objetos')
            $.each(objetos, function(index, item){
                $('.list-group').append('<li class="list-group-item">'+ item.id + ' ' + item.nome +'</li>')
            })

             $.get('https://coarinet.com/teste.json')
                .done(function(resposta){
                    // a varivel resposta (pode ser qualquer nome) recebera os dados retornados pela requisicao
                    // aqui voce faz o que quiser com os dados

                    // exemplo de laco de repeticao
                    $.each(resposta, function(indice, item){
                        // faz algo a cada interaca
                        $('.list-group').append('<li class="list-group-item">'+ item.id.nome +'</li>')
							   window.localStorage.setItem('objetos', JSON.stringify(resposta))
						
                    })
					
                })		
        })
		
    </script>
  </body>
</html>

ajax json webstorage

  • The window.localStorage.setItem no need is inside the each. Error appears when pressing F12?

  • No one appears

  • I’m actually getting an idea of another code as I don’t know much I’m trying to adapt this ai rsrss

  • JSON is incorrect in https://coarinet.com/teste.json and before the $.each(resposta use the resposta = JSON.parse(resposta)

  • See of the json is right now ?

  • Taking a leather so far nothing rssr

Show 1 more comment

1 answer

0

There are some errors in your code, for example item.id.nome. Follows updated and commented code.

<!DOCTYPE hml>
<html>
    <head>
        <title>Title of the document</title>
    </head>

    <body>
        The content of the document...

        <h1>Listar objetos</h1>

        <p>Dados da Salvo:</p>
        <ul class="list-group"></ul>

        <p>Dados da Requisição:</p>
        <ul class="list-group2"></ul>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
        $(function() {

          /* Captura os dados salvos no navegador */
          let objetos = JSON.parse(window.localStorage.getItem('objetos'))

          /* Percorre todos os valores salvos no navegador */
          $.each(objetos, function(index, item) {
            $('.list-group').append('<li class="list-group-item">' + item.id + ' ' + item.title + '</li>')
          })

          /* Realiza a requisição para capturar os dados */
          $.get('https://jsonplaceholder.typicode.com/todos/')
            .done(function(resposta) {

              resposta = JSON.parse(resposta)

              /* Percorre todos os valores retornados pela API */
              $.each(resposta, function(indice, item) {
                $('.list-group2').append('<li class="list-group-item">' + item.id + ' ' + item.title + '</li>')
              })

              /* Salva os valores no navegador */
              window.localStorage.setItem('objetos', JSON.stringify(resposta))
            })
        })
        </script>
    </body>
</html>

  • Whatever is wrong with my json in my url will not https://coarinet.com/teste.json

  • I put the same data already made test, I gave permission in the aquivo anything else

  • @Hemersonprestes I updated the answer.

Browser other questions tagged ajax json webstorage

You are not signed in. Login or sign up in order to post.