Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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 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>
- var employees=JSON.parse(txt).employees;
- 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.
- var employees = JSON.parse(txt).employees
- var element = document.createElement('div'); // creates an empty div
- someElement.append(otherElement); // makes otherElement a child of someElement
- var json = eval('(' + txt + ')');
- alert(json.employees[0].firstName);
- function insertItem(myid,position,newListItem) {
- var ul = document.getElementById(myid);
- var li = document.createElement("li");
- li.innerHTML=newListItem;
- ul.insertBefore(li, ul.getElementsByTagName("li")[position]);
- }
- 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"}]}';
- txt = JSON.parse(txt); // normally after this you can check if txt is not null or something
- var html = '<div class="info"><ul>';
- for (var a = 0; a < txt.employees.length; a++) {
- html += '<li id="name">'+txt.employees[a].firstName+' '+txt.employees[a].lastName+'</li>';
- html += '<li id="time">'+txt.employees[a].time+'</li>';
- html += '<li id="email">'+txt.employees[a].email+'</li>';
- }
- html += '</ul></div>';
- document.getElementById('myoutput').innerHTML = html;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement