首页 > 解决方案 > 如何在 jquery 中解析 JSON 对象数组

问题描述

我有以下 JSON 文件,它将 JSON 数组存储在本地存储中

var item1 =
    {
            item_id:332443,
        item_rank:3.6,
        item_type:["BMW","Camry","Ford"]
    };  //create a JavaScript object called item

var item2 = 
    {
        item_id:354443,
        item_rank:2.6,
        item_type:["BMW","Camry","Ford","Tesla","GM","Chevrolet"]
    }

var item3 = 
    {
        item_id:387443,
        item_rank:4.7,
        item_type:["BMW","Camry","Ford","Tesla","GM","Chevrolet","Ave"]         
    }

var item4 = 
    {
        item_id:387443,
        item_rank:4.7,
        item_type:["BMW","KIA","Ford","Tesla","Nissan","Ave"]       
    }

var itemsRecords = 
    {
        items:[item1,item2,item3,item4] 
    }




 var itemsRecordsJSON = JSON.stringify(itemsRecords);       

    localStorage.setItem("itemsRecords",itemsRecordsJSON);

我正在尝试通过以下命令行从本地存储调用数组

(document).ready(function(){
        allRecords = localStorage.getItem("itemsRecords");
                allSubjects = JSON.parse(allRecords);
});

我想获得一些帮助,以便在单个 HTML 中从 JSON 数组信息中导出每个项目,因此总数为 4。提前致谢

标签: javascriptjqueryjson

解决方案


忽略对本地存储的调用,我做了一个简化的示例,您可以将其用作指南:

// Create the JSON object and stringify

var item1 = {
    item_id:332443,
    item_rank:3.6,
    item_type:["BMW","Camry","Ford"]
};

var item2 = {
    item_id:354443,
    item_rank:2.6,
    item_type:["BMW","Camry","Ford","Tesla","GM","Chevrolet"]
};

var itemsRecords = {
    items:[item1,item2] 
};

var itemsRecordsJSON = JSON.stringify(itemsRecords);

// On document ready, parse the JSON string to object again
// and show their items on the console.

$(document).ready(function()
{
    var records = JSON.parse(itemsRecordsJSON);
    
    records.items.forEach(function(item)
    {
        //console.log(item);
        $("#results").append(
            "<b>Id=" + item.item_id +
            " - Rank=" + item.item_rank +
            " - Type=" + item.item_type.join(",") +
            "</b><hr>"
        );
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="results">
</div>


推荐阅读