无法从对象数组中获取数据

Question

我正在尝试从角度对象数组中获取数据：

我的代码结构：

storegeArray: any [];

1. 填写数组“-”中的所有字段：

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

2. 将数据推送到特定id的数组中：

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

3. 在本地存储中保存数组（storegeArray）：

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

到这里一切正常。'

console.log(this.storegeArray) 

输出：

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

工作正常，我在 id = 3 id of data.vehicle_id 中有数据

在全局情况下，我在数组中的不同索引中有多个数据，所以我使用这种方法来获取：

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]));
      }
    }
}

输出：

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

我尝试做的是在数组中获取以查看数据（对象）而不是“-”并获取表示获取 x 和 y 的数据（对象）。

我做错了什么？

Answer 1

我在此处发现的问题如下所列。

在本地存储中保存数组（storegeArray）：

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

始终将字符串值存储在localStorage

同时从 localStorage 获取时将其解析为有效的 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]));
      }
    }
}

在这里试一试。 注意：我使用了一个模拟存储变量，因为在 Sandbox 编辑器中使用 localStorage 时存在一些问题。

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]));
      }
    }
}

Answer 2

由于您通过 id 保存车辆的数据，因此最好使用对象而不是数组。那么你就不需要检查它是否是-。

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