如何從文件中獲取JSON數據以顯示在HTML頁面

我有一個不是很典型的JSON（https://github.com/conde-nast-international/cnid-tech-tests/blob/master/data/article.json），我試圖在HTML頁面上顯示非常簡單的內聯，就像正常的文本和一張照片。如何從文件中獲取JSON數據以顯示在HTML頁面

我在HTML文件中嵌入JavaScript/jQuery，但它似乎並沒有工作。有沒有人對我做錯了什麼有所瞭解？先謝謝你！

HTML（JavaScript的）：

<html> 

<head> 
    <meta charset="utf-8"> 
    <title>JSON Articles</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="article.json"></script> 
</head> 

<body> 

    <div id="output" style="width:100px; text-align:center;"> 
    </div> 

<script> 
    $.ajax({ 
    url:"http://localhost:8888/json-article/article.json", 
    method:"GET", 
    success:function(data){ 
     for(var object in objectJson){ 
     $("#output").text("id="+object.id + "title"+object.title + "body"+object.body + "cover"+object.cover); 
     } 
    } 
    }); 
</script> 
</body> 

</html>

來源

2017-08-10 T.Doe

該文件是不是JSON，它是一個數組。你可以像你一樣包含它，但你需要將它分配給一個變量，例如'var data =/*你的巨大數組* /'，然後在需要的地方使用'data'變量。或者，您可以將數據轉換爲JSON併發出AJAX請求來檢索它 –

我花了兩天時間，但似乎我並沒有正確理解JSON格式。這就是爲什麼我問這個問題，我希望得到更詳細的答案。任何特定的代碼將不勝感激。感謝您的時間。 –

<script> 
    $.ajax({ 
       url:"Your json url", 
       method:"GET", 
       success:function(data){ 
     $("#output").text(data); 
} 
}); 
</script>

來源

2017-08-10 13:27:14

我正在使用本地JSON文件，所以對於JSON網址，我可以只把文件名？ –

我可以知道您正在使用哪種服務器端腳本語言。如果你正在使用PHP，那麼使用這個<？php函數getJson（）{return file_get_contents（'file_path'）;}？>。對此文件進行ajax調用。 –

不，我沒有使用PHP。我只是使用MAMP本地主機和HTML文件。還有article.json文件，但這是全部 –

你應該導入JQuery的

<script> 
     $.ajax({ 
        url:"Your json url", 
        method:"GET", 
        success:function(data){ 
      var objectJson = JSON.parse(data) 
      $("#output").text("id="+objectJson.id+"title"+objectJson.title); 
    } 
    }); 
    </script>

你應該做的是爲你的內容的每個屬性。

編輯：

<script> 


    $.ajax({ 
         url:"Your json url", 
         method:"GET", 
         success:function(data){ 
       var objectJson = JSON.parse(data) 
       For(var object in objectJson){ 
        $("#output").text("id="+object.id+"title"+object.title);   
       } 

     } 
     }); 
     </script>

來源

2017-08-10 13:31:45

您正在編寫，我編輯了 –

謝謝！好吧目前我有但我得到錯誤：'未捕獲的SyntaxError：意外的令牌var'，仍然是一個空白的html頁 –

它被什麼行抓住？ – Demon

如何從文件中獲取JSON數據以顯示在HTML頁面

回答

相關問題