如何将解析的JSON输出到JavaScript对象

Question

我正在尝试在HTMl中显示已保存的Cookie。我得到[Object object]，而不是解析的stringfy。我可以在不解析它​​时显示我的对象的字符串版本，但我需要它作为示例显示“lab1 25 25”或类似的东西。我错过了什么吗？我仍然是javascript的新手。

function saveButton()
{

    var cookieName = {'Assessment': [new Assessment("lab1", document.getElementById("lab1").value, 25),
                                  new Assessment("lab2", document.getElementById("lab2").value, 25),    
                                  new Assessment("lab3", document.getElementById("lab3").value, 25),
                                  new Assessment("lab4", document.getElementById("lab4").value, 25),
                                  new Assessment("lab5", document.getElementById("lab5").value, 25),
                                  new Assessment("lab6", document.getElementById("lab6").value, 25),    
                                  new Assessment("lab7", document.getElementById("lab7").value, 25),
                                  new Assessment("lab8", document.getElementById("lab8").value, 25),
                                  new Assessment("lab9", document.getElementById("lab9").value, 25),
                                  new Assessment("lab10", document.getElementById("lab10").value, 25),
                                  new Assessment("quiz1", document.getElementById("quiz1").value, 10),
                                  new Assessment("quiz2", document.getElementById("quiz2").value, 10),  
                                  new Assessment("quiz3", document.getElementById("quiz3").value, 10),
                                  new Assessment("quiz4", document.getElementById("quiz4").value, 10),
                                  new Assessment("quiz5", document.getElementById("quiz5").value, 10),
                                  new Assessment("quiz6", document.getElementById("quiz6").value, 10),  
                                  new Assessment("quiz7", document.getElementById("quiz7").value, 10),
                                  new Assessment("quiz8", document.getElementById("quiz8").value, 10),
                                  new Assessment("quiz9", document.getElementById("quiz9").value, 10),
                                  new Assessment("quiz10", document.getElementById("quiz10").value, 10),
                                  new Assessment("project", document.getElementById("project").value, 100),
                                  new Assessment("exam1", document.getElementById("exam1").value, 100),
                                  new Assessment("exam2", document.getElementById("exam2").value, 100),
                                  new Assessment("par1", document.getElementById("par1").value, 5),
                                  new Assessment("par2", document.getElementById("par2").value, 5), 
                                  new Assessment("par3", document.getElementById("par3").value, 5),
                                  new Assessment("par4", document.getElementById("par4").value, 5),
                                  new Assessment("par5", document.getElementById("par5").value, 5),
                                  new Assessment("par6", document.getElementById("par6").value, 5), 
                                  new Assessment("par7", document.getElementById("par7").value, 5),
                                  new Assessment("par8", document.getElementById("par8").value, 5),
                                  new Assessment("par9", document.getElementById("par9").value, 5),
                                  new Assessment("par10", document.getElementById("par10").value, 5),
                                  new Assessment("par10", document.getElementById("par11").value, 5), 
                                  new Assessment("par10", document.getElementById("par12").value, 5),
                                  new Assessment("par10", document.getElementById("par13").value, 5),
                                  new Assessment("par10", document.getElementById("par14").value, 5),
                                  new Assessment("par10", document.getElementById("par15").value, 5), 
                                  new Assessment("extraCredit", document.getElementById("extraCredit").value, 25)  
                                  ] };





    //var cookieName =  {'extraCredit': [new Assessment("extraCredit", document.getElementById("extraCredit").value, 25)] };
    cookieName = JSON.stringify(cookieName);
    //var cookieName = document.getElementById("lab1").value;

    //var cookieValue = document.getElementById("cookieValue").value;
    document.cookie = cookieName + ";";
    //alert(cookieName);


}


function displayButton()
{

    //alert("display");
    var cookies = document.cookie;
    var cookieString = "";
    var lblMessage = document.getElementById("saveGrade");
    var i;
    cookies = cookies.split(";");
    numberofcrumbs = cookies.length;


    for(i = 0; i < numberofcrumbs; i++ )
    {
        cookieString = cookieString + cookies[i] + "<br />";

    }
    cookieString = JSON.parse(cookies);
     lblMessage.innerHTML = cookieString;

     alert(cookieString);
}

这是我的HTML。

<html>
<head>
<link href="gradeCalculator.css" rel="stylesheet" type="text/css">
<!--<script type="text/javascript" src="gradeCalculator.js"> </script> -->
<script type="text/javascript" src="gradCalLab3.js"> </script>

<title>ITS362 Grade Calculator</title>

<body>

<div id="header">
<h3> Welcome to the ITS 362 Grade Calculator!!! </h3>
</div>

<div class="main">


<div id = "tables">
<table>

    <caption> Labs </caption>
    <tr> 
        <th>Points </th>
        <th>Possible </th>
    </tr>
    <tr>
    <td><input name="" type = "text" id="lab1"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab2"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab3"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab4"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab5"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab6"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab7"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab8"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab9"></td>
    <td>25</td>
    </tr>
     <tr>
    <td><input name="" type = "text" id="lab10"></td>
    <td>25</td>
    </tr>

</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>


<div id = "tables">
<table>

    <caption> Quizzes </caption>
    <tr class: "text"> 
        <th>Points </th>
        <th>Possible </th>
    </tr>
    <tr>
    <td><input type = "text" id="quiz1"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz2"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz3"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz4"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz5"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz6"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz7"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz8"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz9"></td>
    <td>10</td>
    </tr>
    <td><input type = "text" id="quiz10"></td>
    <td>10</td>


</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>


<div id = "tables" >
<table>

    <caption> Exams </caption>
    <tr> 
        <th>Points </th>
        <th>Possible </th>
    </tr>
    <tr>
    <td><input type = "text" id="exam1"></td>
    <td>100</td>
    </tr>
     <tr>
    <td><input type = "text" id="exam2"></td>
    <td>100</td>
    </tr>

</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id = "tables" >
<table>

    <caption> Project </caption>
    <tr> 
        <th>Points </th>
        <th>Possible </th>
    </tr>
    <tr>
    <td><input type = "text" id="project"></td>
    <td>100</td>
    </tr>

</table>
</div>

<div id = "tables" >
<table>

    <caption> Extra Credit </caption>
    <tr> 
        <th>Points </th>
        <th>Possible </th>
    </tr>
    <tr>
    <td><input type = "text" id="extraCredit"></td>
    <td>25</td>
    </tr>

</table>
</div>
<div id = "tables" >
  <table>

    <caption>Particpation</caption>
    <tr> 
        <th>Points </th>
        <th>Possible </th>
    </tr>
    <tr>
    <td><input type = "text" id="par1"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par2"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par3"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par4"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par5"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par6"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par7"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par8"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par9"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par10"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par11"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par12"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par13"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par14"></td>
    <td>5</td>
    </tr>
    <tr>
    <td><input type = "text" id="par15"></td>
    <td>5</td>
    </tr>



</table>
</div>


</div>

<div id= "scale">

<table width="27%" onMouseOver="displayInfo(event, 'gradeWeight');" onMouseMove="displayInfo(event, 'gradeWeight');" onMouseOut="clearInfo();" onClick="clearInfo()">

    <caption>Grade Scale</caption>
    <tr> 
        <th>Percentage </th>
        <th>Letter Grade </th>
    </tr>
    <tr>
    <td>>= 90</td>
    <td>A</td>
    </tr>
    <tr>
    <td>>= 80 but < 90</td>
    <td>B</td>
    </tr>
    <tr>
    <td>>= 70 but < 80</td>
    <td>C</td>
    </tr>
    <tr>
    <td>>= 60 but < 70</td>
    <td>D</td>
    </tr>
    <tr>
    <td>< 60</td>
    <td>F</td>
    </tr>

</table>
<p><br/>
  <input type = "button" id="calculate" value = "Calculate" onClick= "javascript:sumAll()">
  <input type="text" id="answer" size="10"> <br/>
  <br />
  <input type="button" id="saveButton" value="Save" onClick="javascript:saveButton()" />
  <input type="button" id="displayButton" value="Display" onClick="javascript:displayButton()" />
</p>
<span id="saveGrade"> </span>
</div>


<div id = "gradeWeight" style = "display: none">
    Labs : 30% <br/>
    Quizzes: 10% <br/>
    Exams: 30% <br/>
    Project: 20% <br/>
    Extra Credit: 5% <br/>
    Particpation: 10% <br/>
</div>




</body>
</head>
</html>

Answer 1

弄清楚我的问题。需要实现for循环才能获取对象属性。

    function displayButton()
{

    var cookies = document.cookie;


    var cookieString = "";
    var lblMessage = document.getElementById("saveGrade");
    var i;
    cookies = cookies.split(";");
    var parObj = JSON.parse(cookies[0]);    
    numOfArray = parObj.Assessment.length;
    arrayString = "";

    for(i = 0; i < numOfArray; i++)
    {
        arrayString = arrayString + parObj.Assessment[i].name + " = " + parObj.Assessment[i].grade + " " + "/" + parObj.Assessment[i].worth + "<br />";

    }
     lblMessage.innerHTML = arrayString;


}