Type 'null' is not assignable to type 'string'

Question

Getting error

Type 'null' is not assignable to type 'string'

in

this.localItem = localStorage.getItem("todos");

When trying to resolve by using

this.localItem = JSON.parse(localStorage.getItem("todos") || '{}');

the entire component of webpage is getting blank. This is for preparing a to do list and auto adding to do items and removing todo items by adding to local storage.

    import { Component, OnInit } from '@angular/core';
    import { Todo } from 'src/app/Todo';
    
    @Component({
      selector: 'app-todos',
      templateUrl: './todos.component.html',
      styleUrls: ['./todos.component.css']
    })
    export class TodosComponent implements OnInit {
      localItem: string;
      todos:Todo[];
        constructor() {
        this.localItem = localStorage.getItem("todos");
        if(this.localItem == null){
          this.todos = [];
        }
        else{
          this.todos = JSON.parse(this.localItem);
        }
        this.todos =[]
      }
    
      ngOnInit(): void {
      }
      deleteTodo(todo:Todo){
        console.log(todo)
        const index = this.todos.indexOf(todo);
        this.todos.splice(index,1)
        localStorage.setItem("todos", JSON.stringify(this.todos));
      }
      addTodo(todo:Todo){
        console.log(todo);
        this.todos.push(todo);
        localStorage.setItem("todos", JSON.stringify(this.todos));
      }
    }
    ```

Why do you use an empty object as "default" when `this.todos` is obviously supposed to be an array (`this.todos = []`)? — Andreas, Dec 28 '21 at 15:18
_"Getting error as mentioned above"_ - Did you search for the error? Do you understand the source of it? — Andreas, Dec 28 '21 at 15:20
See if this helps -> https://stackoverflow.com/questions/67700374/use-localstorage-getitem-with-typescript — Siddhant, Dec 28 '21 at 15:20

score 0 · Answer 1 · answered Dec 29 '21 at 04:31

Since your assigning a local storage value to the object in todos[] it might return object of arrays so try [] while parsing object of arrays.

export class TodosComponent implements OnInit {
      localItem: string ;
      todos:Todo[];
        constructor() {
        this.localItem = localStorage.getItem("todos"||"[]");
        if(this.localItem == null){
          this.todos = [];
        }
        else{
          this.todos = JSON.parse(this.localItem );
        }
        this.todos =[]
      }
    
      
    }

score 0 · Answer 2 · answered Oct 31 '22 at 07:38

import { Component, Input, OnInit } from '@angular/core';
import { Todo } from '../../Todo';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit {
  localItem: any;
  @Input() todo:Todo;
 
  todos:Todo[];
  dataSource: any;

  constructor() { 
    this.localItem = localStorage.getItem("todos");
    if(this.localItem  == null){
      this.todos= [];
     }
   else{
    this.todos = JSON.parse(this.localItem)
   }
  }

  ngOnInit(): void {
  }
  deleteTodo(todo:Todo) {
    console.log(todo);
    const index = this.todos.indexOf(todo);
    this.todos.splice(index, 1);
    localStorage.setItem("todos", JSON.stringify(this.todos));

  }
  addTodo(todo:Todo) {
    console.log(todo);
    this.todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(this.todos));

  }

}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Nov 03 '22 at 09:08

Type 'null' is not assignable to type 'string'

2 Answers2