如何将解析后的 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;


}

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

How to output parsed JSON to JavaScript object

html

javascript

oop

parsing

json