如何将ng repeat与存储在localStorage中的JSON文件一起使用

How to use ng-repeat with a JSON file stored in localStorage?

本文关键字：JSON 中的 文件 一起 localStorage ng repeat 存储      更新时间：2023-09-26

我正在学习如何将JSON文件（本地保存）保存到用户的localStorage，然后使用Angular检索该信息，并使用hg repeat将JSON文件中的每个对象（由表示产品的多个对象组成）放入产品框（显示为搜索结果）

这是我迄今为止的代码。。

AJAX.JS

if(typeof(Storage)!=="undefined")
{
$(document).ready(function () {
    $('.searchButton').click(function () {
    $.ajax({
        timeout: 3000,
        url: "data/cars.json",
        dataType: "text",
        success: function(products) {
        alert(products);
        var dataToStore = JSON.stringify(products);
        localStorage.setItem('userData', dataToStore);
        alert(dataToStore);
        storedData = JSON.parse(localStorage.getItem('userData'));
        alert(storedData);
        window.location.href = "results.html";

        },
    });
    });
})
}
else {
alert("Sorry your browser is too old to support this website. Please update.");
}

APP.JS

var app = angular.module('searchFox', []);
app.controller('foxController', ['$scope', function($scope) {
    $scope.valueFromLocalStorage = storedData;
}]);

HTML（搜索结果页//角度部分）

 <div class="row section">
        <div class="three columns" ng-repeat="v in valueFromLocalStorage">
            <div class="panel">
                <img class="panelImage" src="images/product6.jpg"></img>
                <p class="panelTitle">{{v.model}}</p>
                <p class="panelPrice">{{v.price}}</p>   
            </div>
            <img class="mFireOne"  src="images/fire.png">
            <p class="mViewOne">9318</p>
            <img class="mFireTwo"  src="images/heart.png">
            <p class="mViewTwo">172</p>
        </div>

    </div>

JSON文件示例

{
    "make": "honda",
    "model": "accord",
    "year": "1989",
    "mileage": "25000",
    "color": "black",
    "transmission": "automatic",
    "cylinders": "4",
    "type": "sedan",
    "title": "clean",
    "price": "$15,000",
    "img_url": "http://img.modifiedcartrader.com/uploaded/XL/2006/12/6584_Honda_Accord_1222200613708PM1.JPG"
},
{
    "make": "acura",
    "model": "integra",
    "year": "2001",
    "mileage": "108800",
    "color": "red",
    "transmission": "manual",
    "cylinders": "4",
    "type": "coupe",
    "title": "clean",
    "img_url": "http://carphotos.cardomain.com/ride_images/2/3951/4101/22377050003_large.jpg"
},
{
    "make": "ford",
    "model": "mustang",
    "year": "2015",
    "mileage": "1003",
    "color": "blue",
    "transmission": "manual",
    "cylinders": "8",
    "type": "coupe",
    "title": "clean",
    "img_url": "http://s1.cdn.autoevolution.com/images/news/gallery/2015-ford-mustang-rendered-with-slightly-different-face-rear-photo-gallery_6.jpg"
},
{
    "make": "volkswagen",
    "model": "golf",
    "year": "2002",
    "mileage": "86000",
    "color": "green",
    "transmission": "automatic",
    "cylinders": "4",
    "type": "hatchback",
    "title": "clean",
    "img_url": "http://zombdrive.com/images/2002_volkswagen_gti_2dr-hatchback_18t_s_oem_1_500.jpg"
},
{
    "make": "bmw",
    "model": "335i",
    "year": "2010",
    "mileage": "24664",
    "color": "red",
    "transmission": "manual",
    "cylinders": "6",
    "type": "sedan",
    "title": "clean",
    "img_url": "http://foodcourtlunch.com/wp-content/uploads/2010/03/bmw_335i_30.jpg"
}

]

到目前为止，我已经设法使用AJAX来获取本地帮助JSON文件，并将其保存到用户的localStorage中。但现在我不知道如何正确、干净地将其发送到Angular Page（搜索结果），然后使用hg-reeat为JSON文件中的每个产品对象创建一个产品容器。。。

您需要从本地存储获取对象。您可以使用https://github.com/grevory/angular-local-storage这个图书馆也是。

示例：

```

var app = angular.module('searchFox', ['LocalStorageModule']);
app.controller('foxController', ['$scope, LocalStorageModule', function($scope, LocalStorageModule) {
$scope.saved = "gold";
$scope.myObj = localStorageService.get('key')
}]);
<div class="three columns" ng-repeat="smth in myObj">

```

在那之后，你将有你的对象在你的视野中，可以做任何你想做的事情。

最终，您想要馈送ng重复一个数组。根据JSON文件的内容，您可能需要调用JSON.parse(jsonStr);
或者以某种方式将JavaScript中对象的内容传递到数组中。

但要想一想：<div class="three columns" ng-repeat="??">
想要类似
的东西<div class="three columns" ng-repeat="{arrayOfObjects}">
其中是一些arrayOfObjects = [ {...}, {...}, {...}];

如果您已经在localStorage中存储了所有内容，Angular可以使用本地JS或Angular本地存储直接访问这些值。

只需从控制器中的localStorage获取值，然后使用$scope将其传递给视图。

$scope.valueFromLocalStorage = window.localStorage.getItem('productQuery');

现在，您可以使用ng-repeat而不是valueFromLocalStorage来在视图中显示值。

 <div class="row section">
    <div class="three columns" ng-repeat="v in valueFromLocalStorage">
        <div class="panel">
            <img class="panelImage" ng-src="/images/{{v.imageName}}" ></img>
            <p class="panelTitle">{{v.name}}</p>
            <p class="panelPrice">{{v.price}}</p>   
        </div>
        <img class="mFireOne"  src="images/fire.png">
        <p class="mViewOne">9318</p>
        <img class="mFireTwo"  src="images/heart.png">
        <p class="mViewTwo">172</p>
    </div>

此外，您的ajax.js文件中有一个更正：

var save = function(obj) {
        localStorage["productQuery"] = JSON.stringify(obj); //obj instead of productQuery
};
相关文章：