私はとnames.jsonという名前のファイルがある場合はJSON：JSON + Javascript/jQuery jsonファイルからデータをインポートして解析する方法
{"employees":[
{"firstName":"Anna","lastName":"Meyers"},
{"firstName":"Betty","lastName":"Layers"},
{"firstName":"Carl","lastName":"Louis"},
]}
どのように私はJavaScriptでそのコンテンツを使用することができますか？
例をチェックアウト：
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON('names.json',function(data){
console.log('success');
$.each(data.employees,function(i,emp){
$('ul').append('<li>'+emp.firstName+' '+emp.lastName+'</li>');
});
}).error(function(){
console.log('error');
});
});
</script>
</head>
<body>
<ul></ul>
</body>
</html>
jQueryコードでは、employeesプロパティが必要です。
data.employees[0].firstName
だから、このようになります。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.getJSON("names.json", function(data) {
console.log(data);
$('body').append(data.employees[0].firstName);
});
</script>
</body>
</html>
もちろん、非jQueryバージョンのプロパティも必要ですが、まずJSONレスポンスを解析する必要があります。
document.writeがページ全体を破壊していることにも注意してください。
それでも問題が解決しない場合は、代わりに$.getJSONラッパーの完全な$.ajax要求をしてみてください。
$.ajax({
url: "names.json",
dataType: "json",
success: function(data) {
console.log(data);
$('body').append(data.employees[0].firstName);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('ERROR', textStatus, errorThrown);
}
});
こんにちは、まだ私に働いていない崖。あなたはコード全体を投稿できますか？このスクリプトは頭の中にありましたが、現在は体内にあり、機能しませんでした。 =/ – GarouDan
@ GarouDan：それがうまくいかないと言ったらどういう意味なのか分かりません。コールバックはまったく呼び出されますか？コンソールに何かエラーがありますか？ –
あなたは、PHPを使用したい場合。
<?php
$contents = file_get_contents('names.json');
?>
<script>
var names = <?php echo $contents; ?>
var obj = JSON.parse(names);
//use obj
</script>
必要に応じて、それを使用するには、非同期：
<script>
$(document).ready(function(){
$.get("get_json.php?file=names",function(obj){
//use obj here
},'json');
});
</script>
PHP：
<?php
$filename = $_GET['file'] . '.json';
$data['contents'] = file_get_contents($filename);
echo json_encode($data);
?>
あなたのJSONファイルが有効なJSONが含まれていません。代わりに以下を試してみてください。
{
"employees":
[
{
"firstName": "Anna",
"lastName": "Meyers"
},
{
"firstName": "Betty",
"lastName": "Layers"
},
{
"firstName": "Carl",
"lastName": "Louis"
}
]
}
応答が表示されます。これは可能性が行う方法http://jsonlint.com/
oh。はい。今すぐ働く^^。 Thxそんなに。私は問題がjqueryコードであることでした。 – GarouDan
+1無効なJSONが私の頭の上に届きました。 –
あなたは、単に変数としてあなたのJSONオブジェクトを宣言し、あなたのHTML内のJavaScriptファイルを含めることができます。たとえば、グローバルなJavaScriptスコープからJSONデータにアクセスするには、data.employeesを使用します。
のindex.html：
<html>
<head>
</head>
<body>
<script src="data.js"></script>
</body>
</html>
data.js：
var data = {
"employees": [{
"firstName": "Anna",
"lastName": "Meyers"
}, {
"firstName": "Betty",
"lastName": "Layers"
}, {
"firstName": "Carl",
"lastName": "Louis"
}]
}
この文をファイルdata.jsに追加する必要があります。 "" "" module.exports = data; "" "" 他のファイルでdata.jsを使用してデータ変数の値をインポートすることはできません。 –
私は質問を変更し、エラーを修正していました。今、私はそれがアップホーセットを受け取ることができ、他の人に良い参考になると思う。 – GarouDan