Get external json data, list, and save in webstorage

Question

Get external json data, list, and save in webstorage

Navigation

#1 by (0 votes)

0

I'm trying to get the data via json, but I want to save it in the browser, but I can not 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

asked by anonymous 09.08.2018 / 01:05

1 answer

Sum of column totals What do I have to configure in the httpd.conf file, so I do not give 404 more in Laravel 5.6?

score 0 · Answer 1

There are some errors in your code, for example item.id.nome . Here is 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(){/*Capturaosdadossalvosnonavegador*/letobjetos=JSON.parse(window.localStorage.getItem('objetos'))/*Percorretodososvaloressalvosnonavegador*/$.each(objetos,function(index,item){$('.list-group').append('<liclass="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>