如何让我的JSON数据出现在我的HTML页面中？

-2

我有2个JSON文件，当我点击一个按钮时应该改变页面的数据。有人可以帮助我确定我能做到这一点吗？如何让我的JSON数据出现在我的HTML页面中？

这是我的JSON文件（有一个第二个在此确切格式和相同数量的内容）：

{ 
    "ranking": "National Universities", 
    "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.", 
    "badge": "/img/national-universities-badge.svg", 
    "rankings": [ 
     { 
      "rank": 1, 
      "institution": "Princeton University", 
      "location": "Princeton, NJ" 
     }, 
     { 
      "rank": 2, 
      "institution": "Harvard University", 
      "location": "Cambridge, MA" 
     }, 
     { 
      "rank": 3, 
      "institution": "University of Chicago (tie)", 
      "location": "Chicago, IL" 
     } 
    ] 
}

这是我的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Webpack App</title> 

     <script> 

     $(document).ready(function() { 

      var compute = function() { 

       $.getJSON("C:\Users\rohit\Downloads\fed-assessment\fed-assessment\src\data\data-1.json" , function(data1) { 
        document.getElementById("ranking").innerHTML = data1.ranking; 
        document.getElementById("description").innerHTML = data1.description; 
        document.getElementById("badge").innerHTML = data1.badge; 
        }; 

       }); 



     }); 

     </script> 

    </head> 
    <body> 
     <div id="content"></div> 

     <div class=""> 
    <div class=""> 
     <h2 id="ranking"></h2> 
     <p id="description"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing 
      elit. Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum 
      temporibus. 
     </p> 
     <div class=""> 
      <div> 
       <img class="badge" src="/img/national-universities-badge.svg" alt=""> 
      </div> 
      <div class=""> 
       <ul> 
        <li class=""> 
         <strong>#1</strong> 
         <div class=""> 
          <a href="">Name of college</a> 
          <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div> 
         </div> 
        </li> 
        <li class=""> 
         <strong>#2</strong> 
         <div class=""> 
          <a href="">Name of college</a> 
          <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div> 
         </div> 
        </li> 
        <li class=""> 
         <strong>#3</strong> 
         <div class=""> 
          <a href="">Name of college</a> 
          <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div> 
         </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="dummyAd"> 
     <img class="add" height="250px" width="300px" src="http://placehold.it/600x500?text=dummy+ad"> 
    </div> 
</div> 
     <button id="button" onclick="compute()">Toggle Ranking List</button> 
     <script src="bundle.js"></script> 
    </body> 
</html>

来源

2016-11-08 flatafor

我想'$ .getJSON'不会'文件工作：///'协议，'＃badge'是一个图片标签，所以使用'.src'而不是'.innerHTML' –

正如马姆杜上面说。经测试无需从文件加载即可工作。你也过不了徽章ID（它被设置为一类），所以

的document.getElementById（ “徽章”）。innerHTML的= data1.badge

将无法正常工作。

var data1 = { "ranking": "National Universities", "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.", "badge": "/img/national-universities-badge.svg", "rankings": 
 
[ { "rank": 1, "institution": "Princeton University", "location": "Princeton, NJ" }, { "rank": 2, "institution": "Harvard University", "location": "Cambridge, MA" }, { "rank": 3, "institution": "University of Chicago (tie)", "location": "Chicago, IL" 
 
} ] }; 
 

 
document.getElementById("ranking").innerHTML = data1.ranking; document.getElementById("description").innerHTML = data1.description; document.getElementById("badge").innerHTML = data1.badge;

<h2 id="ranking"></h2 > 
 
<p id = "description"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing 
 
    elit.Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum 
 
    temporibus. 
 
</p> 
 

 
<div id="badge"></div>

来源

2016-11-09 00:08:19 Icewine

需要在你的代码一些修正：

$.getJSON不能与本地JSON文件的工作，因为它只是用协议的工作。

你总是得到这个错误控制台如果使用local JSON文件

的XMLHttpRequest无法加载文件：/// C：\用户\罗希特\下载\喂养评估\喂养评估的\ src \数据\数据1.json。 Access-Control-Allow-Origin不允许Origin null。

参考：JQuery $.getJSON load local JSON file not working

可以定义徽章作为class不是id。所以，正确的语法将是

<img id="badge" src="/img/national-universities-badge.svg" alt="">

那么这声明document.getElementById("badge").src = data1.badge;将工作。

工作演示：

var data = { 
 
    "ranking": "National Universities", 
 
    "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.", 
 
    "badge": "/img/international-universities-badge.svg", 
 
    "rankings": [ 
 
     { 
 
      "rank": 1, 
 
      "institution": "Princeton University", 
 
      "location": "Princeton, NJ" 
 
     }, 
 
     { 
 
      "rank": 2, 
 
      "institution": "Harvard University", 
 
      "location": "Cambridge, MA" 
 
     }, 
 
     { 
 
      "rank": 3, 
 
      "institution": "University of Chicago (tie)", 
 
      "location": "Chicago, IL" 
 
     } 
 
    ] 
 
} 
 

 
function toggleData() { 
 
    document.getElementById("ranking").innerHTML = data.ranking; 
 
    document.getElementById("description").innerHTML = data.description; 
 
    document.getElementById("badge").src = data.badge; 
 
    }

<h2 id="ranking"></h2> 
 
<p id="description"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing 
 
    elit. Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum 
 
    temporibus. 
 
</p> 
 
<img id="badge" src="/img/national-universities-badge.svg" alt=""/><br> 
 
<button id="button" onclick="toggleData()">Toggle Ranking List</button>

来源

2016-11-09 07:25:21

如何让我的JSON数据出现在我的HTML页面中？

回答

相关问题