javascript - Iterating through JSON objects -

i have little problem iterating through json objects. have json file ajax, have there 15 objects. in html have div in 3 sections: header, body , date. every 15 sec should update sections data json file.

html:

<div class="blog">     <span id="header">         blog     </span>     <span id="body">         20+ best examples of <br>         coming page design     </span>     <span id="date">         may 28, 2013     </span> </div> 

javascript:

$(function() {     $.ajax({         url: "news.json",         success: function(result) {             var headcont = $('#header');             var bodycont = $('#body');             var datecont = $('#date');             var res = result.news;              $.each(res, function(index, element) {                 (header in res) {                     setinterval(function() {                         headcont.html(element.header);                     }, 15000)                 }             });         }     }); }); 

json:

{     "news": [{           "header": "microsoft starting private beta iphone keyboard",           "body": "microsoft has own mobile operating system, hasn't stopped opening public beta new iphone keyboard.",           "date": "2016-04-14t08:40:23.449z"         }, {           "header": "microsoft sues u.s. government on data gag orders",           "body": "microsoft wants federal court invalidate part of 1986 law alleged has been abused government when authorities demand customers' data.",           "date": "2016-03-14t08:40:23.449z"      }] } 

1. you should never run interval on ajax
2. in case call server once , loop on same data

assuming json works loop, perhaps meant

function updateit() {    var headcont = $('#header');    var bodycont = $('#body');    var datecont = $('#date');    $.ajax({     url: "news.json",     success: function(result) {       var res = result.news;       $.each(res, function(index, element) {         (header in res) {           headcont.append(element.header);         }       });     });     settimeout(updateit,15000); // run after success. use or complete if needed   } } 

if need update div every 15 seconds list of stories gotten 1 ajax call, need loop with

var news,cnt=0,tid; function render() {   if (cnt >= news.length) {     clearinterval(tid); // or set cnt 0 , not return re-iterate     return;   }   var item = news[cnt];   $('#header').append(item.header);   $('#body').append(item.body);   $('#date').append(item.date);   cnt++; } $(function() { .    succes: function(result) {      news = result.news;      render(); // run       var tid = setinterval(render,150000); // , schedule next run    } . }); 

result = {    "news": [{      "header": "microsoft starting private beta iphone keyboard",      "body": "microsoft has own mobile operating system, hasn't stopped opening public beta new iphone keyboard.",      "date": "2016-04-14t08:40:23.449z"    }, {      "header": "microsoft sues u.s. government on data gag orders",      "body": "microsoft wants federal court invalidate part of 1986 law alleged has been abused government when authorities demand customers' data.",      "date": "2016-03-14t08:40:23.449z"    }]  }    var news, cnt = 0, tid;    function render() {    console.log(cnt,news[cnt]);    if (cnt >= news.length) cnt = 0; // rerun    var item = news[cnt];    $('#header').html(item.header);    $('#body').html(item.body);    $('#date').html(item.date);    cnt++;  }  $(function() {    news = result.news;    render();    var tid = setinterval(render, 5000);  });  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="header"></div>  <div id="body"></div>  <div id="date"></div>