JSON配列によるループ：キャッチされていない構文エラー、キャッチされていない参照エラー

私はまだJQueryを使用していないので、これを使用してJSON配列を繰り返し、Webページを配列のデータで更新しようとしています。JSON配列によるループ：キャッチされていない構文エラー、キャッチされていない参照エラー

JSONファイルには、次のようになります。私のHTML文書は次のようになります

[ 
    { 
     "firstname":"John", 
     "lastname":"Doe", 
     "studentnumber":"666" 
    }, 
    { 
     "firstname":"Foo", 
     "lastname":"Bar", 
     "studentnumber":"777" 
    } 
]

：

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="jquery-2.2.3.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       console.log('ready'); 
       $.getJSON('us.json', function(data){ 
        $.each(JSON.parse(data), function(key, value){ 
         $.each(value, function(index, member){ 
          html += '<div class="member">'; 
          html += '<h4>' + member.firstname + ' ' + member.lastname +'</h2>'; 
          html += '<p>' + 'has the following member number:' + member.studentnumber + '</p>'; 
          html += '</div>'; 
          console.log(html) 
         }) 
        }); 
        $('#members').html(html); 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <div> 
      <h3>Members</h3> 
     </div> 
     <div id="members"></div> 
    </body> 
</html>

あなたは、私は、このタスクを達成するために.each機能を使用しようとしていることがわかります。上記のコードは、次のエラー与えている：ここにいくつかの以前の質問を見た後

VM2028:1 Uncaught SyntaxError: Unexpected token o 
(anonymous function) @ index-v1.html:10 
fire     @ jquery-2.2.3.js:3187 
self.fireWith  @ jquery-2.2.3.js:3317 
done     @ jquery-2.2.3.js:8785 
(anonymous function) @ jquery-2.2.3.js:9151

を、私はちょうどdataでJSON.parse(data)を交換しようとしたが、これは、次のエラーが発生しました：

Uncaught ReferenceError: html is not defined 
(anonymous function) @ index-v1.html:12 
jQuery.extend.each @ jquery-2.2.3.js:371 
(anonymous function) @ index-v1.html:11 
jQuery.extend.each @ jquery-2.2.3.js:365 
(anonymous function) @ index-v1.html:10 
fire     @ jquery-2.2.3.js:3187 
self.fireWith  @ jquery-2.2.3.js:3317 
done     @ jquery-2.2.3.js:8785 
(anonymous function) @ jquery-2.2.3.js:9151

何ができますかこれらの問題を引き起こし、どのように修正するのですか？

出典

2016-04-27 JavascriptLoser

- のErr ...あなたはすでにあなたの質問のタイトルに問題を修正しました... – Quentin

あなた@Quentinをしています権利は、タイトルがあまりよく言われていません。私は今それを編集します。 – JavascriptLoser

原因：JSON.parse()は、オブジェクトが渡されます。（@Rayonのおかげで）

dataはJSON形式で既にあるので、それにJSON.parse()を使用する必要はありません。

$.getJSON('us.json', function(data){ 

    // Problem is here 
    $.each(JSON.parse(data), function(key, value) {

それを使用する前html変数を定義

Uncaught ReferenceError: html is not defined

2番目のエラーについてdata

$.getJSON('us.json', function(data) { 
    $.each(data, function(key, value) {

を解析しないでください。

var html = ''; // Add before `each`.

また、第1 eachに渡されたデータがすでにmember対象であるとして、ネストされたeachの必要はありません。ここにはArray#forEachを使って書かれたコードがあります。「ここではいくつかの以前の質問を見た後、私はただのデータとJSON.parse（データ）を交換しようとした」

$.getJSON('us.json', function (data) { 
    var html = ''; 
    data.forEach(function(member) { 
     html += '<div class="member">'; 
     html += '<h4>' + member.firstname + ' ' + member.lastname + '</h2>'; 
     html += '<p>' + 'has the following member number:' + member.studentnumber + '</p>'; 
     html += '</div>'; 
    }); 

    $('#members').html(html); 
});

出典

2016-04-27 05:51:08 Tushar

エラーの原因：_'JSON.parse'は 'text'を期待しますが' object'は渡されます.._ – Rayon

@Rayon Thanks。追加されました。 – Tushar

これは発生していたエラーを修正しました。ありがとうございます。しかし、あなたのコードはJSON配列の最初のオブジェクトをスキップするようです。これの理由は何でしょうか？ – JavascriptLoser

JSON配列によるループ：キャッチされていない構文エラー、キャッチされていない参照エラー

答えて

関連する問題