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

【问题标题】：How to output parsed JSON to JavaScript object如何将解析的 JSON 输出到 JavaScript 对象
【发布时间】：2015-02-06 18:11:46
【问题描述】：

我正在尝试在我的 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>

【问题讨论】：

你能提供你的html代码吗？
cookieString 不是字符串。 JSON.parse 返回原始对象。您需要遍历数组元素并从中创建 DOM 元素。
我没有在数组中创建循环吗？ @barmar for(i = 0; i "; }
循环结束后你用cookieString = JSON.parse(cookies)覆盖变量。
您没有正确设置 cookie。 cookie 的格式应为name=value。您只是将 JSON 放入 document.cookie 而不给它命名。

标签： javascript html json oop parsing

【解决方案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;


}

【讨论】：