Angular Typescript Push Object into Array, Making Sense of Errors

Question

So I am trying to create an array of objects with windows.localstorage in my app.

export class MyListComponent implements OnInit {

  public myStorage = window.localStorage;
  public list : any [] = [];
  public empty = true;

  constructor() { }

  ngOnInit(): void {

    for(var k in window.localStorage) {
      var temp = this.myStorage[k].split(",");
      console.log(temp);
      if(temp.length == 4) {
        let item = {
          id: k,
          type: temp[1]
        }
        this.empty = false;
        this.list.push(item);
        console.log(item);
      }
    }
    console.log(this.list);
  }

}

For some reason, the last line console.log(this.list) does not seem to be working, or in otherwords, nothing is added to it. I am not sure why this is, as all the other console logs seem to working, such as console.log(temp) and console.log(item). My console also shows the following error:

ERROR TypeError: this.myStorage[k].split is not a function at MyListComponent.ngOnInit

Why is that? If it didn't successfully split, then temp wouldn't have been created. How can I add my item objects into my list array, and why is there a typeerror for this.myStorage.split?

Ravikumar · Accepted Answer · 2021-04-05 04:19:29Z

1

You could try like below. Also it's not advisable to use for...in loops for these kind of instances like localStorage as it iterates over all enumerable properties not just own properties.

Object.keys(window.localStorage).forEach(k => {
    const value = window.localStorage[k];
    if (value) {
        var temp = value.split(",");
        console.log(temp);
        if (temp.length == 4) {
            let item = {
                id: k,
                type: temp[1]
            }
            this.empty = false;
            this.list.push(item);
            console.log(item);
        }
    }
});

answered Apr 5, 2021 at 4:19

Ravikumar

2,20516 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

IWannaDance Over a year ago

Thanks, that worked. I'm still new to angular and all this so I was confused why my code didn't work. Honestly I still am a bit confused on why this works and why mine didn't but I guess it just might be how the syntax was designed.

Ravikumar Over a year ago

You directly called split() without null check "this.myStorage[k].split(",");", that makes the difference. Once the it break(throwing an exception) execution of that thread will stop there it self unless you handle that exception with try...catch(). There is a possibility that localStorage can have key only without value.

Ravikumar Over a year ago

Also localStorage has an inherited property 'length' which returns number and you used for...in loop without string check using directly like this.myStorage[k].split(",") will break the code. I believe that's what happened in your case.

RGA · Accepted Answer · 2021-04-05 04:18:57Z

0

You cannot use 'split' function for a variable from 'window.localStorage'( Storage {editorLastConnected: "1617595775", editorHasEmittedBundle: "true"} ).

In your 1st for loop iteration, your temp variable will hold the value of 'editorLastConnected' which does not have ',' and 'split' function cannot be used.

In the 2nd iteration of for loop iteration. your temp varauble will hoold the value of 'editorHasEmittedBundle' which does not have ',' and 'split' function cannot be used.

So error will be thrown.

answered Apr 5, 2021 at 4:18

RGA

3134 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular Typescript Push Object into Array, Making Sense of Errors

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related