如何輸出解析的JSON到JavaScript對象

我想在我的HTMl中顯示一個保存的cookie。我得到[Object object]，而不是解析的stringfy。當不解析它時，我可以顯示我的對象的字符串版本，但我需要它顯示爲「lab1 25 25」或類似的示例。我錯過了什麼？我仍然是新的JavaScript。如何輸出解析的JSON到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>

來源

2015-02-06 Onlytito

您能否爲您提供html代碼？ – morha13 2015-02-06 18:15:39

'cookieString'不是一個字符串。 'JSON.parse'返回原始對象。您需要遍歷數組元素並從中創建DOM元素。 – Barmar 2015-02-06 18:18:00

我加了我的HTML – Onlytito 2015-02-06 18:46:08

想通了我的問題。需要實現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; 


}

來源

2015-02-07 22:13:08 Onlytito

如何輸出解析的JSON到JavaScript對象

回答

相關問題