Hello, I have the following problem. I'm doing a kind of all list where it shows me the data collected from the textarea in a list. Everything went fine until I went to the stage of saving the data in local storage, passing these strings to arrays. The error that throws me is the following: Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at getTweetLocalStorage (app.js: 102) at HTMLDocument.localStorageListo (app.js: 63)
My code is as follows:
//variables
const listaTweets = document.getElementById('lista-tweets');
//Events listeners
eventListeners();
function eventListeners() {
//cuando se envia el formulario
document.getElementById('formulario').addEventListener('submit', agregarTweet);
//borrar de lista tweet
listaTweets.addEventListener('click', borrarTweet);
//contenido cargado
document.addEventListener('DOMContentLoaded', localStorageListo);
}
//Funciones
function agregarTweet(e) {
e.preventDefault();
// leer el valor desde el textarea (escrito) .value accede directo al valor
const tweet = document.getElementById('tweet').value;
//crear un boton de borrar
const botonBorrar = document.createElement('a');
botonBorrar.classList = 'borrar-tweet';
botonBorrar.innerText = 'X';
listaTweets.appendChild(botonBorrar);
//crear elemento (li) y añadirlo a la lista
const li = document.createElement('li');
li.innerText = tweet;
//agregar al dom el li
listaTweets.appendChild(li);
//agregamos tweet localstorage
agregarTweetLocalStorage(tweet);
}
//elimina el tweet del DOM
function borrarTweet(e) {
e.preventDefault();
if(e.target.className === 'borrar-tweet') {
e.target.parentElement.remove();
alert('borraste el tweet');
console.log(e.target.parentElement.innerText);
}
}
//Mostrar los datos de localstorage en la lista
function localStorageListo() {
let tweets;
tweets = obtenerTweetLocalStorage();
tweets.forEach(function(tweet) {
//crear un boton de borrar
const botonBorrar = document.createElement('a');
botonBorrar.classList = 'borrar-tweet';
botonBorrar.innerText = 'X';
listaTweets.appendChild(botonBorrar);
//crear elemento (li) y añadirlo a la lista
const li = document.createElement('li');
li.innerText = tweet;
//agregar al dom el li
listaTweets.appendChild(li);
});
}
//agregar tweets al local storage
function agregarTweetLocalStorage(tweet) {
let tweets;
tweets = obtenerTweetLocalStorage();
//añado el nuevo tweet
tweets.push(tweet);
//convertir string a arreglo para el local storage
localStorage.setItem('tweets', JSON.stringify(tweets) );
}
//comprueba que haya elementos en localstorage, retorna un arreglo
function obtenerTweetLocalStorage() {
let tweets;
//revisamos los valoes del local storage bajo una condicion
if(localStorage.getItem('tweets') === null) {
tweets = [];
} else {
tweets = JSON.parse(localStorage.getItem('tweets') );
}
return tweets;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/skeleton.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div id="contenido">
<div class="container">
<h1>Local Storage</h1>
<div class="row">
<div class="six columns">
<label for="tweet">Tweet:</label>
<form action="#" id="formulario">
<label for="tweet"></label>
<textarea id="tweet" class="u-full-width"></textarea>
<input type="submit" class="button u-full-width button-primary" value="Agregar">
</form>
</div>
<div class="six columns">
<h2>Mis Tweets</h2>
<div id="lista-tweets"></div>
<!-- aqui van los tweets del text area -->
</div>
</div>
</div>
</div> <!--#contenido-->
<script src="assets/js/app.js"></script>
</body>
</html>