Uncaught SyntaxError: Unexpected token in JSON at position 0

2

In my html I'm using a Javascript to try to retrieve a saved Json object in the localStorage. I'm using Google Chrome.

First I get the value of the "name" attribute of my Json object that is in the localStorage, via form, and then execute the script that should retrieve this object, saving in a var. However, I have the following error:

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at buscaConta (principal.html:114)
    at HTMLButtonElement.onclick (principal.html:99)
buscaConta @ principal.html:114
onclick @ principal.html:99

This is the excerpt with my form and the script that retrieves the Json object by "name."

div  class="formu" id="formularioDeIdent" style="display:none">

            <p class="textoForm"> Informe seu nome: </p> 


        <form>

            <div>
                <label for="nome"> Nome: </label>
                <input type="text" id="nome" />
            </div>


            <div class="centralizar">
            <br><br>
                <button class="botaoPequeno" type="button" onClick="buscaConta()">Buscar sua conta</button>
            </div>
            <br><br>
            <div class="centralizar" style="display:none">
            <br><br>
                <button class="botaoPequeno" type="button" onClick="mudaMenu('formularioDeIdent', 'menu2')">Prosseguir</button>
            </div>

        </form>

    </div>

    <script>
        function buscaConta(){
            var name = document.getElementById('nome');

             //O ERRO OCORRE NA LINHA ABAIXO:
            console.log(JSON.parse(localStorage[nome.value]).valueOf());
            //console.log(oCliente);
        }
    </script>

The search form and Json saved in the local Storage:

ThecodeIusetosavetheJsonobjectsinthelocalStorage:

<script>varnome=document.getElementById('nome');varagencia=document.getElementById('agencia');varconta=document.getElementById('conta');varobj;document.getElementById("enviarConta").addEventListener('click', function(){

            //Monta o objeto que será salvo

            obj = {
            nome: nome.value,
            agencia: agencia.value,
            conta: conta.value
            };

            //Mostra no console o objeto antes de ser salvo no localStorage
            console.log(obj.valueOf());
            //Salva o objeto no localStorage
            localStorage[nome.value] = JSON.stringify(obj);

            });
    </script>
    
asked by anonymous 23.04.2018 / 03:41

1 answer

1

The problem was as follows:

There was already an element in html with id="name". So by giving a

var nome = document.getElementById('nome');

I was looking for another element of the document, not the form field I was filling out to do the search in the localStorage.

I changed the text input id of the search form to "name2" and it worked!:

 <div>
       <label for="nome"> Nome: </label>
       <input type="text" id="nome2" />
 </div>

The DOM does not allow elements with duplicate Id. If it has, when doing a search for the id it will get the first element that it finds with the id id.

    
24.04.2018 / 04:09