javascriptでjqueryでjsonファイルを読み取る

jsonのjsonファイルをjavascriptで読み込もうとしています。このコードjavascriptでjqueryでjsonファイルを読み取る

$(function() { 
 
    var new4 = []; 
 
    $.getJSON('new4.json', function(data) { 
 
    $.each(data.new4, function(i, f) { 
 
     var tblRow = "<tr>" + "<td>" + f.FirstName + "</td>" + 
 
      "<td>" + f.LastName + "</td>" + "<td>" + f.EmailAddress + "</td>" + "<td>" + f.City + "</td>" + "</tr>" 
 
     $(tblRow).appendTo("#userdata tbody"); 
 
     } 
 
     ss); 
 

 
    }); 
 

 
});

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

 
<head> 
 

 

 
</head> 
 

 
<body> 
 

 
    <div class="wrapper"> 
 
    <div class="profile"> 
 
     <table id="userdata" border="2"> 
 
     <thead> 
 
      <th>FirstName</th> 
 
      <th>LastName</th> 
 
      <th>EmailAddress</th> 
 
      <th>City</th> 
 
     </thead> 
 
     <tbody> 
 

 
     </tbody> 
 
     </table> 
 

 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

そして、私のJSONコードソースの場合

{ 
    "person": [ 
     { 
      "firstName": "Clark", 
      "lastName": "Kent", 
      "Email Address": "Reporter", 
      "City": 20 
     }, 
     { 
      "firstName": "Bruce", 
      "lastName": "Wayne", 
      "Email Address": "Playboy", 
      "City": 30 
     }, 
     { 
      "firstName": "Peter", 
      "lastName": "Parker", 
      "Email Address": "Photographer", 
      "City": 40 
     } 
    ] 
}

と私の何が間違っている、私は私のフォルダにjqueryのファイルfromwebsiteをダウンロードしてください。

私はこの写真を追加しました。ソースはjsonについて非常に重要であり、私は自分のやり方がhtmlを作成するのに確実であると確信しています。私はHTMLを起動すると

は、私はあなたが正しくあなたの問題を解決するコードを以下の理解していれば絵

出典

2017-03-17 Mustafa Coskun

今回はどのようなエラーメッセージが表示されますか？ –

実際には何もありません。 Htmlが開きますが、jsonファイルをインクルードする配列やsometingはありません。私が始めると、jsonで与えられた情報がないhtmlファイルが表示されました。 –

に示すようなデータがありません。

あなたのAJAXリクエストが動作していると仮定すると、この

$.each(data.person, function(i, f) { 
    var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + 
    "<td>" + f.lastName + "</td>" + "<td>" + f["Email Address"] + "</td>" + "<td>" + f.City + "</td>" + "</tr>" 
    $(tblRow).appendTo('body'); 
});

var data = { 
 
    "person": [ 
 
     { 
 
      "firstName": "Clark", 
 
      "lastName": "Kent", 
 
      "Email Address": "Reporter", 
 
      "City": 20 
 
     }, 
 
     { 
 
      "firstName": "Bruce", 
 
      "lastName": "Wayne", 
 
      "Email Address": "Playboy", 
 
      "City": 30 
 
     }, 
 
     { 
 
      "firstName": "Peter", 
 
      "lastName": "Parker", 
 
      "Email Address": "Photographer", 
 
      "City": 40 
 
     } 
 
    ] 
 
} 
 

 
$.each(data.person, function(i, f) { 
 
    var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + 
 
    "<td>" + f.lastName + "</td>" + "<td>" + f["Email Address"] + "</td>" + "<td>" + f.City + "</td>" + "</tr>" 
 
    $(tblRow).appendTo('body'); 
 
});

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

出典

2017-03-17 07:45:00

'f.EmailAddress'は未定義になることに注意してください。 –

@RoryMcCrossan更新 –

であなたの.each関数を変更してください、あなたのコード内のいくつかの構文の問題があります。

は、あなたが存在しないdata.new4をループしている$.each()閉じ括弧
前にランダムssを持っています。 data.person配列をループする必要があります
使用しているプロパティ名がオブジェクト内のプロパティ名と一致しません。 JSは大文字と小文字を区別します。
'Email Address'プロパティにスペースが含まれているため、かっこ表記を使用する必要があります。他のプロパティのフォーマットと一致するように変更することをお勧めします。 emailAddress。 Cityでも同じことが行われます。
エラーではありませんが、文字列リテラルを追加する必要はありません。文字列リテラルを同じ文字列に入れるだけです。あなたのコードは動作するはずの場所で、これらの修正を

：

var data = { 
 
    "person": [{ 
 
     "firstName": "Clark", 
 
     "lastName": "Kent", 
 
     "Email Address": "Reporter", 
 
     "City": 20 
 
    }, { 
 
     "firstName": "Bruce", 
 
     "lastName": "Wayne", 
 
     "Email Address": "Playboy", 
 
     "City": 30 
 
    }, { 
 
     "firstName": "Peter", 
 
     "lastName": "Parker", 
 
     "Email Address": "Photographer", 
 
     "City": 40 
 
    }] 
 
} 
 

 
//$.getJSON('new4.json', function(data) { 
 
    $.each(data.person, function(i, person) { 
 
     var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>" 
 
     $(tblRow).appendTo("#userdata tbody"); 
 
    }); 
 
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="profile"> 
 
     <table id="userdata" border="2"> 
 
      <thead> 
 
       <th>FirstName</th> 
 
       <th>LastName</th> 
 
       <th>EmailAddress</th> 
 
       <th>City</th> 
 
      </thead> 
 
      <tbody> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

はまた、上記のエラーのすべてがお使いのブラウザでコンソールをチェックして見つけることができることに注意してください。これは一般的にはを押してアクセスできます。F12

出典

2017-03-17 07:45:13

ありがとうございます。その方法は同じhtmlで動作しますが、このjsonフォルダが常に更新されるので、私はフォルダからjsonファイルを取得します。フォルダからjsonファイルを取得すると、コードをどのように更新できますか？私はnew4.jsonを書いています。これは、これがフォルダ内のjsonファイルです。あなたのコードに応じてどのように私は外側からjsonコードを取得できますか？そして私はそのコードをここで試しました。 https://jsfiddle.net/b5fr55qy/メモ帳でこのコードを取ると++うまく動作しません。 –

これはコードの簡略化されたバージョンです。私はAJAXリクエストをここで作ることができないので、答えにデータを含めただけです。 '$ .getJSON'行のコメントを外すだけです。 –

javascriptでjqueryでjsonファイルを読み取る

答えて

関連する問題