4

私はJSONオブジェクトを持っています:

var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe","time":"9:15am","email":"john_doe@gmail.com" },' +
'{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"anna@gmail.com" },' +
'{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"peter@gmail.com"}]}';

div ステートメントの間にリストとして出力したいこと:

  • ジョン・ドウ
  • 午前9時15分

  • john_doe@gmail.com

  • アンナ・スミス

  • 午前9時15分

  • anna@gmail.com

  • ピーター・ジョーンズ

  • 午前9時15分
  • peter@gmail.com

入力しようとしている HTML は次のようになります。

    <div class="info">
        <ul>
            <li id="name"></li>
            <li id="time"></li>
            <li id="email"></li>
        </ul>
    </div>

どうすればこれを達成できますか?

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<div id="output">

</div> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe","time":"9:15am","email":"john_doe@gmail.com" },' +
'{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"anna@gmail.com" },' +
'{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"peter@gmail.com"}]}';

var employees=JSON.parse(txt).employees;
var container=document.getElementById("output");

for (i=0;i<employees.length;i++) { //Loops for the length of the list
    var info=document.createElement('div');
    info.className='info'; //Creates a new <div> element and adds the class info to it

    var ul=document.createElement('div'); //Creates <ul> element
    info.appendChild(ul); //Adds the <ul> to the newly created <div>

    var name=document.createElement('li');
    name.className='name'; //Should use class, not id, as ID must be unique
    name.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
    ul.appendChild(name);

    var time=document.createElement('li');
    time.className='time';
    time.innerHTML=employees[i].time;
    ul.appendChild(time);

    var email=document.createElement('li');
    email.className='email';
    email.innerHTML=employees[i].email;
    ul.appendChild(email);

    container.appendChild(info); //Adds the final generated HTML to the page

} //Will repeat for each item in list.

</script>
</body>
</html>
4

2 に答える 2

1

まず、文字列をオブジェクトに変換します。

var employees=JSON.parse(txt).employees;

次に、ループを設定して HTML を構築します。

var container=//Link to the containing element using getElementById or similar

for (i=0;i<employees.length;i++) { //Loops for the length of the list
    var info=document.createElement('div');
    info.className='info'; //Creates a new <div> element and adds the class info to it

    var ul=document.createElement('div'); //Creates <ul> element
    info.appendChild(ul); //Adds the <ul> to the newly created <div>

    var name1=document.createElement('li'); //Chrome seems not to like the variable "name" in this instance
    name1.className='name'; //Should use class, not id, as ID must be unique
    name1.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
    ul.appendChild(name1);

    var time=document.createElement('li');
    time.className='time';
    time.innerHTML=employees[i].time;
    ul.appendChild(time);

    var email=document.createElement('li');
    email.className='email';
    email.innerHTML=employees[i].email;
    ul.appendChild(email);

    container.appendChild(info); //Displays the elements on the page

} //Will repeat for each item in list.

これは を使用して実現することもできますがcontainer.innerHTML、そのような要素を構築すると DOM が混乱する可能性があるため、通常はテキスト ノードにのみ推奨されますが、理想的には を使用しますdocument.createTextNode()。

于 2012-09-04T14:36:51.517 に答える
0

まず、JSON文字列の配列を解析して取得します。

var employees = JSON.parse(txt).employees

次に、このようなHTML要素を作成します

var element = document.createElement('div'); // creates an empty div

そして、HTMLツリーを一緒に配置します

someElement.append(otherElement); // makes otherElement a child of someElement
于 2012-09-04T14:29:13.053 に答える