나는이 샘플 JSON 코드가 구문 분석 JSON

Question

에 오류를 받고 있어요 내가 콘솔

에 오류가이 파일 NEW_CONTENT의 코드 항상이 jQuery를 AJAX로하지만 어떤 이유로 루프를 통해 원하는. JSON

[ 
    { 
     "name": "Mehmet", 
     "email": "mehmet@gmail.com" 
    }, 
    { 
     "name": "Fareed", 
     "email": "fareed3242@yahoo.com" 
    }, 
    { 
     "name": "Jonathan", 
     "email": "jonathan@gmail.com" 
    } 
] 

이는 내 HTML은

<div id="main">This is the original text when page loads</div> 

<button id="button1" type="button">Update content with Ajax</button> 

이는 자바 스크립트 내부

$(document).ready(function(){ 
    $("#button1").on('click', function() { 
     $.ajax({ 
      type: "GET", 
      url:"new_content.json", 
      success:function(rawData){ 
         var data = JSON.parse(rawData); 
         var result = ''; 
         result += '<table> \ 
           <tr> \ 
             <th>name</th> \ 
             <th>email</th> \ 
            </tr> \ 
            <tr>'; 
         $.each(data, function(i, item) { 
           result += "<tr><td>" + item[i].name + "</td>"; 
           result += "<td>" + item[i].email + "</td></tr>"; 
         } 
         result += "</tr></table>"; 
         $("#main").html(result); 
      } 
     }); 
    }); 
}); 

Answer 1

먼저 당신이 그것을 구문 분석 할 필요가이 donot JSON.parse() 제거 2 실수

1. 있다.
2. 데이터를 반복 할 경우 item[i].name은 올바르지 않으므로 item.name 및 item.email이어야합니다.

위의 2 이외에도 오타가 아닌 경우 닫는 괄호도 누락되었습니다.

실행 다음과 난 그냥 내 로컬 컴퓨터

$(document).ready(function() { 
     $("#button1").on('click', function() { 
      $.ajax({ 
       type: "GET", 
       url: "my.json", 
       success: function (rawData) { 
        var data = rawData; 

        var result = ''; 
        result += 
         '<table> \ 
           <tr> \ 
             <th>name</th> \ 
             <th>email</th> \ 
            </tr> \ 
            <tr>'; 
        $.each(data, function (i, item) { 
         result += "<tr><td>" + item.name + "</td>"; 
         result += "<td>" + item.email + "</td></tr>"; 
        }); 
        result += "</tr></table>"; 
        $("#main").html(result); 
       } 
      }); 
     }); 
    }); 

Answer 2

$(document).ready(function(){ 
    $("#button1").on('click', function() { 
     $.ajax({ 
      type: "GET", 
      url:"new_content.json", 
      success:function(rawData){ 
         var data = JSON.parse(rawData); 
         var result = ''; 
         result += '<table> \ 
           <tr> \ 
             <th>name</th> \ 
             <th>email</th> \ 
            </tr> \ 
            <tr>'; 
         $.each(data, function(i, item) { 
           result += "<tr><td>" + item[i].name + "</td>"; 
           result += "<td>" + item[i].email + "</td></tr>"; 
         }); 
         result += "</tr></table>"; 
         $("#main").html(result); 
      } 
     }); 
    }); 
}); 

보십시오. 이 도움이

$.each(data, function(i, item) { 
    result += "<tr><td>" + item.name + "</td>"; 
    result += "<td>" + item.email + "</td></tr>"; 
}) 

희망 :

Answer 3

문제는 각 루프의 내부에서 온다, 당신은해야 모습 [i] 루프를 사용할 필요가 없습니다.

var data = [{ 
 
    "name": "Mehmet", 
 
    "email": "mehmet@gmail.com" 
 
    }, 
 
    { 
 
    "name": "Fareed", 
 
    "email": "fareed3242@yahoo.com" 
 
    }, 
 
    { 
 
    "name": "Jonathan", 
 
    "email": "jonathan@gmail.com" 
 
    } 
 
]; 
 
var result = ""; 
 

 
var result = ''; 
 
result += '<table><tr><th>name</th><th>email</th></tr><tr>'; 
 

 
$.each(data, function(i, item) { 
 
    result += "<tr><td>" + item.name + "</td>"; 
 
    result += "<td>" + item.email + "</td></tr>"; 
 
}) 
 

 
result += "</tr></table>"; 
 
$("#main").html(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="main"></div>