localStorage對象數組：僅將唯一的新對象推入數組

Question

我已閱讀了許多“堆棧溢出”問題，但似乎都與我要解決的問題無關。

我有一個要保存在localStorage中的對象數組，看起來像這樣（此示例僅包括兩個）：

[
  {
    "image": "http://example-image.jpg",
    "restaurantName": "Elena's L'Etoile",
    "parentLocation": "London",
    "areaLocation": "West End of London",
    "pageLink": "http://example-address1"
},
  {
    "image": "http://example-image2.jpg",
    "restaurantName": "Pied a Terre",
    "parentLocation": "London",
    "areaLocation": "West End of London",
    "pageLink": "http://example-address2"
  }
]

每次用戶訪問頁面時，都會從頁面中提取數據，並創建一個餐廳對象，如下所示：

 var restaurant = {"image": $image, "restaurantName": $restaurantName, "parentLocation": $parentLocation, "areaLocation": $areaLocation, "pageLink": $pageLink};

然后使用以下命令將其存儲到現有對象數組中（上方）：

existingRestaurants.push(restaurant);

問題是，如果用戶兩次訪問同一頁面，重復的對象將被推入數組。 如何確保僅將唯一對象推入數組？

我研究過的方法：使用$ .each，$。inArray，$。grep。 我認為最簡單的方法是遍歷existingRestaurants數組中的所有對象，並將“ restaurantName”鍵的值與新餐廳對象中的對應值進行比較。

但是我在Stack Overflow上找不到其他類似的東西。

Answer 1

您可以在此處使用一些解決方案。 第一種是保留當前的對象數組，並在插入新的餐廳名稱之前對其全部進行掃描以查找重復的餐廳名稱。 看起來像這樣：

// assuming 'arr' is the variable holding your data
var matches = $.grep(arr, function(obj) {
    return obj.restaurantName == $restaurantName;
});

if (matches.length) {
    console.log('Duplicate found, item not added');
} else {
    var restaurant = {
        "image": $image,
        "restaurantName": $restaurantName,
        "parentLocation": $parentLocation,
        "areaLocation": $areaLocation,
        "pageLink": $pageLink
    };
    arr.push(restaurant);
}

工作實例

另外，最好將您的數據結構修改為一個對象，其鍵為不能重復的值。 在這種情況下，餐廳名稱：

var arr = {
    "Elena's L'Etoile": {
        "image": "http://example-image.jpg",
        "parentLocation": "London",
        "areaLocation": "West End of London",
        "pageLink": "http://example-address1"
    },
    "Pied a Terre": {
        "image": "http://example-image2.jpg",
        "parentLocation": "London",
        "areaLocation": "West End of London",
        "pageLink": "http://example-address2"
    }
};

if (arr[$restaurantName]) {
    console.log('Duplicate found, item not added');
} else {
    var restaurant = {
        "image": $image,
        "parentLocation": $parentLocation,
        "areaLocation": $areaLocation,
        "pageLink": $pageLink
    };
    arr[$restaurantName] = restaurant;
}

工作實例

Answer 2

關聯數組怎么樣？ 不過，您必須選擇一個鍵：

var restaurant0 = {"image": "http://example-image.jpg", "restaurantName": "Elena's L'Etoile", "parentLocation": "London", "areaLocation": "West End of London", "pageLink": "http://example-address1" };
var restaurant1 = {"image": "http://example-image2.jpg", "restaurantName": "Pied a Terre", "parentLocation": "London", "areaLocation": "West End of London", "pageLink": "http://example-address2"};

var existingRestaurants = {};
existingRestaurants["id0"] = restaurant0;
existingRestaurants["id1"] = restaurant1;