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

Question

我正在尝试在HTMl中显示一个已保存的cookie。 我得到[对象对象]，而不是解析的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;


}