Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Erro no método parse

Olá, Tudo bem? O meu código está dando o seguinte erro no console do navegador:

VM52:1 Uncaught SyntaxError: Unexpected token 'o', "[object Obj"... is not valid JSON
    at JSON.parse (<anonymous>)
    at script-crud.js:7:22

Entretanto, não estou conseguindo entender e resolver o problema... Caso alguém possa me ajudar, ficarei feliz! Segue abaixo o meu código

const adicionarTarefaBt = document.querySelector('.app__button--add-task');
const formularioAdcionarTarefa = document.querySelector('.app__form-add-task');
const textarea = document.querySelector('.app__form-textarea');
const ulTarefas =  document.querySelector('app__section-task-list');


const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];

function criarTarefa(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-list-item')

    const svg = document.createElement('svg')
    svg.innerHTML = `
        <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
        </svg>
    `
    const paragrafo = document.createElement('p')
    paragrafo.textContent = tarefa.descricaoTarefa

    const botao = document.createElement('button')
    const imagemBotao = document.querySelector('img')
    imagemBotao.setAttribute('src', '/imagens/edit.png')

    botao.append(imagemBotao)
    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    return li
}


adicionarTarefaBt.addEventListener('click', function(){
    formularioAdcionarTarefa.classList.toggle('hidden');
})

formularioAdcionarTarefa.addEventListener('submit', function(evento){
    evento.preventDefault();
    const tarefa = {
        descricaoTarefa: textarea.value
    }
    tarefas.push(tarefa);
    localStorage.setItem('tarefas', JSON.stringify(tarefas));
})

tarefas.forEach(tarefa => {
    const elementoTarefa = criarTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
});
2 respostas
solução!

Olá, Arthur! Tudo bem?

O erro "Unexpected token 'o', "object Obj"... is not valid JSON" indica que o valor armazenado no localStorage não é uma string JSON válida.

Tenta limpar o seu localstorage abrindo o console do navegador e rodando esse comando:

localStorage.removeItem('tarefas');

Eu também, notei que você tem um pequeno erro na seleção do ulTarefas. Você está usando:

const ulTarefas = document.querySelector('app__section-task-list');

Mas deveria ser:

const ulTarefas = document.querySelector('.app__section-task-list');

Note o ponto . antes da classe. Isso pode estar causando problemas ao tentar adicionar as tarefas na lista.

No mais caso, o erro ainda persista, peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Deu certinho agora, muito obrigado!