Question

我有以下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。预先感谢

Answer 1

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

// 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>

Answer 2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WDV321 Advanced Javascript - JSON</title>
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
  <script src="createJSONArray.js"></script>


<script>
    $(document).ready(function(){
        // get the objects from local storage
        allRecords = localStorage.getItem("studentRecords");
        // convert JSON Object to Javascript object
        var records = JSON.parse(allRecords);
     // add counter
    i =0;
     // add loop to read the objects
    records.students.forEach(function(item)
    {   
     var listAdd = "";
      // create variable to exract the array
        var courses = records.students[i].student_courses;
          // add inner counter
            var j=0;

             $.each( courses, function( ){

              listAdd = listAdd + "<li style = 'margin-left: 80px'>" + courses[j] + "</li>" ;

                 j++;
              courses.join("<br/>") 
});
       $("body").append ("<div class='studentCard'>" + "<h3>Student ID:<span id='id'>" + records.students[i].student_id + "</span></h3>" + "<p>Student GPA:<span id='gpa'>"+ records.students[i].student_gpa +"</span></p>" + "<p>Student Courses:  </p>" + "<ul id = 'classes'></ul>" + listAdd + "</p>" + "</div>" );
     i++;
    });
    });

</script>


<style>
    .studentCard    {
        width:200px;
        box-sizing:border-box;
        background-color:lightblue;
        padding-left:5px;
        padding-top:3px;
        border:thin solid blue;
        box-shadow: 2px 2px 2px grey;
        margin: 5px;
    }

    .studentCard h3 {
        margin:0px; 
    }

 # sort {
  margin-left: 10px;
 }
</style>



</head>

<body>

    <h3>Creating and consuming a JSON object</h3>


</html>

如何在jQuery中解析JSON对象数组

2 个答案: