can't get data from array of object

Question

i am trying to get data from array of object in angular :

structure of my code :

storegeArray: any [];

1. fill all field in array "-" :

    this.storegeArray = new Array(100).fill("-");
   

2. push data into array in specific id:

      this.storegeArray[data.vehicle_id] = {x: location[1], y: location[0]};
   

3. save array (storegeArray) in local storege:

    localStorage.setItem("coordinates",this.storegeArray);
   

To here every thing work fine.'

console.log(this.storegeArray) 

output :

(100) ["-", "-", "-", {…}, "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"]
0: "-"
1: "-"
2: "-"
3: {x: 33.8953628, y: 35.4906471}
4: "-"
5: "-"
6: "-"
7: "-"
8: "-"
.......

Work fine i have data in id = 3 id of data.vehicle_id

In global case i have multiple data in different indice in array so i use this method to get :

const myArrayFromLocalStorage = localStorage.getItem('coordinates');
if (myArrayFromLocalStorage) {
    for(let i=0; i<myArrayFromLocalStorage.length; i++){
      if(JSON.stringify(myArrayFromLocalStorage[i] != "-")){
        console.log(JSON.stringify(myArrayFromLocalStorage[i]));
      }
    }
}

output:

 "-"
 ","
 "-"
 ","
 "-"
 ","
 "["
 "o"
 "b"
 "j"
 "e"
 "c"
 "t"
 " "
 "O"
 "b"
 "j"
 "e"
 "c"
 "t"
 "]"
 ","
 "-"
 ","
 "-"
 ","
 "-"

What i try to do is fetch in array to see data (object) not "-" and get this data (object) that mean get x and y .

What i do wrong?

Answer 1

Since you keep the data for vehicle by an id, it's better to use an object instead of an array. Then you wouldn't need to check if it is - or not.

1. this.storage = {};
2. this.storage[data.vehicle_id] = {x: location[1], y: location[0]};
3. localStorage.setItem('data', JSON.stringify(this.storage)); // to save the data
4. const dataFromLocalStorage = JSON.parse(localStorage.getItem('data') || '{}'); // to get the data from localStorage

Answer 2

Issue that I found here are listed below.

Save array (storegeArray) in local storage:

localStorage.setItem("coordinates", JSON.stringify(this.storegeArray));

Always store a string value in localStorage

Also while fetching from localStorage parse it to valid JSON

const myArrayFromLocalStorage = JSON.parse(localStorage.getItem('coordinates'));
if (myArrayFromLocalStorage) {
    for(let i=0; i<myArrayFromLocalStorage.length; i++){
      if(myArrayFromLocalStorage[i] != "-"){
        // JSON.stringify is not needed here. You can directly compare to string
        console.log(JSON.stringify(myArrayFromLocalStorage[i]));
      }
    }
}

Try a sample here. NB: I have used a mock storage variable since there is some issue in using localStorage in Sandbox editor.

const storegeArray = new Array(100).fill("-");
storegeArray[10] = {x: 10, y: 10}
// localStorage.setItem("coordinates", JSON.stringify(storegeArray));
const mockStorage = JSON.stringify(storegeArray);
// const myArrayFromLocalStorage = JSON.parse(localStorage.getItem('coordinates'));
const myArrayFromLocalStorage = JSON.parse(mockStorage);
if (myArrayFromLocalStorage) {
    for(let i=0; i<myArrayFromLocalStorage.length; i++){
      if(myArrayFromLocalStorage[i] != "-"){
        // JSON.stringify is not needed here. You can directly compare to string
        console.log(JSON.stringify(myArrayFromLocalStorage[i]));
      }
    }
}