2012-09-30 3 views
1

그래서 내 블로그 용 JavaScript AJAX 로더를 만들고 있었지만 제대로 작동하지 않았습니다. 이전에는 작동했지만 파서와 json 파일에 몇 달을 추가하려고 시도했을 때 방금 멈추었 고로드되지 않았습니다.Ajax JSON 로더가 작동하지 않습니다.

firstTime = 1; 
function ajax_get_json_for_main_page(a){ 

var counter = 0; 
var results = document.getElementById("blogShow"); 

    var hr = new XMLHttpRequest(); 
    hr.open("GET", "articles/main.json", true); 
    hr.setRequestHeader("Content-type", "application/json", true); 
    hr.onreadystatechange = function() { 
     var blog = new Array() 
     var title = ""; 

     if(hr.readyState == 4 && hr.status == 200) { 
      var data = JSON.parse(hr.responseText); 
      for(var obj in data){ 
       for(var entry in data[obj]) 
       { 
        blog[counter] = "<h4>"+entry[obj].title+"</h4><p>"+entry[obj].post+"</p>"+"<hr />"; 
        title += "<a onClick='willImpletmentlater(" + entry[obj] + ")" + "'>" + entry[obj].title + "</a><br /><br />" 
        counter = counter + 1; 
       } 

      } 
      document.getElementById("big3").innerHTML = title; 

      if(firstTime == 1) 
      { 
      results.innerHTML = blog[0] 
      firstTime = 1000; 
      } 


      if(a == 1) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(1, blog);}, 1); 
      } 
      if(a == 2) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(2, blog);}, 1); 
      } 
      if(a == 3) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(3, blog);}, 1); 
      } 
      if(a == 4) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(4, blog);}, 1); 
      } 


     } 
    } 


hr.send(null); 




} 

그리고 또한 JSON : 여기

는 자바 스크립트입니다

{ 
    "june": { 
     "17": { 
      "title": "Monday 17 of June 2012", 
      "post": "the post taken out to save space." 
     }, 
     "16": { 
      "title": "Sunday 16 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "15": { 
      "title": "Saturday 15 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "14": { 
      "title": "Friday 14 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "13": { 
      "title": "Thursday 13 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "12": { 
      "title": "Wednesday 12 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "11": { 
      "title": "Tuesday 11 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "10": { 
      "title": "Monday 10 of June 2012", 
      "post": " the post taken out to save space." 
     } 
    } 

}  

내가 Jsfiddle에 가려고 노력하지만 나는 그들이 아약스로드 생각하지 않는다? 어느 쪽이든 그들은 나에게 아무런 힌트도주지 않았다.

편집 : 나는 여기에 제안 된 주요 구문 분석 비트입니다.

경우 (hr.readyState의 == 4 & & hr.status의 == 200) { VAR 데이터 = JSON.parse (hr.responseText);

  var blog = []; 
      var title = ""; 
      var counter = 0; 

      for (var month in data) { 
       var monthEntries = data[month]; 
       for (var i = 0; i < monthEntries.length; i++) { 
        var entry = monthEntries[i]; 
        blog[counter] = "<h4>" + entry.title + "</h4><p>" + entry.post + "</p>" + "<hr />"; 
        title += "<a onClick='willImpletmentlater(" + entry + ")" + "'>" + entry.title + "</a><br /><br />" 
        counter = counter + 1; 
       } 

      } 

      console.log(blog); 
      console.log(title); 

      document.getElementById("big3").innerHTML = title; 




      if(a == 1) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(1, blog);}, 1); 
      } 
      if(a == 2) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(2, blog);}, 1); 
      } 
      if(a == 3) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(3, blog);}, 1); 
      } 
      if(a == 4) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(4, blog);}, 1); 
      } 


     } 
    } 

편집 :
모든 좋은 지금

편집 : 작동하지 않는 7월 추가 할 경우는 6 월에만 작동
. 그게 좀 이상한가요?

답변

0

아, 네가 무슨 뜻인지 알 겠어. 당신의 json 응답 달 객체는 배열이 아닙니다. 키 값 쌍을 가진 객체입니다. 객체 키는 var 키를 할 때 검색 순서를 설정하지 않습니다 ... 예상 된 순서를 얻으려면 json 응답을 다음과 같이 변경해야합니다. 이

{ 
    "june": [ 
     { 
      "day": "17", 
      "title": "Monday 17 of June 2012", 
      "post": "the post taken out to save space." 
     }, 
     { 
      "day": "16", 
      "title": "Sunday 16 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     { 
      "day": "15", 
      "title": "Saturday 15 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     { 
      "day":"14", 
      "title": "Friday 14 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     { "day": "13", 
      "title": "Thursday 13 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     { "day": "12", 
      "title": "Wednesday 12 of June 2012", 
      "post": "the post taken out to save space" 
     } 
    ] 

} 

나는 jsfiddle을 업데이트했습니다.

http://jsfiddle.net/ew44p/1/

+0

전체적으로 도움을 주셔서 감사합니다. 나는 새로운 대답을 제외했지만 음 ... 7 월과 같은 다른 달을 추가하면 왜 그렇게되는지 궁금합니다. 그것이 작동하지 않는 json? – Temere

+0

(var 달의 데이터)가 매월 순환해야합니까? – Temere

0

아마 이것은 json 구조에 따라 같아야합니다.

for(var month in data){ 
     var monthEntries = data[month]; 
        for(var day in monthEntries) 
        var entry = monthEntries[day]; 
        { 
         blog[counter] = "<h4>"+entry[day].title+"</h4><p>"+entry[day].post+"</p>"+"<hr />"; 
         title += "<a onClick='willImpletmentlater(" + entry[day] + ")" + "'>" + entry[day].title + "</a><br /><br />" 
         counter = counter + 1; 
        } 

       } 
+0

크롬은 나에게 의미가 솔루션 적절한 영역에 도달하지 않는 의미 "정의되지 않은"제목의 속성을 읽을 수 없다고? – Temere

+0

(데이터의 var 월) { \t \t \t var monthEntries = data [month]; (VAR의 monthEntries 하루) \t \t \t \t \t \t VAR 항목 = 새로운 배열() \t \t \t \t \t \t 항목 [일] = monthEntries [일] 대한 ; \t \t \t \t \t \t 경고 (일); \t \t \t \t \t \t \t { \t \t \t \t \t \t 블로그 [카운터] = "

"+ 항목 [일] .title + "

"+ 항목 [일].게시물 + "

"+ "
"; \t \t \t \t \t \t \t 표제 + = "" + entry[day].title + "

" \t \t \t \t \t \t \t 카운터 = 카운터 + 1; \t \t \t \t \t \t} – Temere

+0

나는 위로 변경하고 첫 번째가 아니라 어떤 – Temere

관련 문제