2016-12-09 4 views
1

JSONデータファイルからデータにアクセスして、JavaScriptファイルを使用してこれをHTMLページに印刷したいとします。今のところそれは「未定義」を返すので、私はその理由を理解できません。私のファイルでの相続人コード:JavaScriptファイルのJSONファイルからデータにアクセスし、HTMLページに印刷するにはどうすればよいですか?

template.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <script type ="text/javascript" src="populate.js"></script> 
    </head> 

    <body> 
    <script> 
     document.write(me); 
    </script> 
    <body> 

これは私のstuff.jsonファイルです:

[ 
{"firstname":"James", "lastname":"Davies", "Age":"25"}, 
{"firstname":"Bill", "lastname":"Jones", "Age":"40"} 
] 

と、これはpopulate.js

var me; 
$.getJSON("stuff.json", function(data) { 
    me = data; 
}); 

ですこれらのファイルはすべて同じディレクトリにあります。なぜ私の変数がjavascriptファイルに継承されていないのかわからないので、htmlページに出力されます。

+2

AJAXリクエストが非同期であるため、問題があるので、それが設定されています前に、あなたはDOMにあなたの 'me'変数を書いています。ピザが届く前にピザを食べるようなものです。問題の詳細と解決方法については、「重複としてマークした質問」を参照してください。また、 'document.write()'を使わないでください。 –

+0

また、DOMに直接書き込むオブジェクトの配列を持っているので、文字列に強制的に変換されるので、出力は '[object Object]、[object Object]'になります推測はあなたが望むものではありません。私はその配列をループし、含まれているオブジェクトのプロパティを読み取る方法を研究することをお勧めします。 –

+0

こんにちは、ありがとう、私は実際に重複としてマークした質問が表示されますか? document.write()の代わりに何を使うべきですか? – trouselife

答えて

0

多分それは競合状態ですが、試してみてください。

window.onload = function() { 
     document.write(me); 
    } 
関連する問題