Wie kann ich meine JSON-Daten auf meiner HTML-Seite anzeigen lassen?

-2

Ich habe 2 JSON-Dateien, die die Daten der Seite ändern sollten, wenn ich auf eine Schaltfläche klicke. Könnte mir jemand helfen, festzustellen, wie ich das erreichen kann?Wie kann ich meine JSON-Daten auf meiner HTML-Seite anzeigen lassen?

Hier meine JSON-Datei ist (es gibt eine zweite in diesem genaue Format und die gleiche Anzahl von Inhalten):

{ 
    "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" 
     } 
    ] 
}

Hier mein HTML ist:

<!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>

Quelle

2016-11-08 flatafor

ich denke, '$ .getJSON' nicht mit' Datei arbeiten: /// 'Protokoll und' # badge' ist ein Bild-Tag, also benutzen Sie '.src' nicht' .innerHTML' –

Wie Mamdouh über dem . Getestet, um ohne Laden von Datei zu arbeiten. Wir hatten auch Sie nicht ID für Abzeichen (es auf eine Klasse festgelegt ist), so

document.getElementById ("Abzeichen"). Innerhtml = data1.badge

wird nicht funktionieren.

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>

Quelle

2016-11-09 00:08:19 Icewine

ist eine gewisse Korrektur in Ihrem Code erforderlich :

$.getJSON nicht mit lokalen JSON-Datei funktioniert, wie es nur mit Protokollen arbeitet.

Sie immer diesen Fehler in der Konsole, wenn Verwendung local JSON Datei

XMLHttpRequest Datei kann nicht geladen werden: /// C: \ Benutzer \ rohit \ Downloads \ Fed-Einschätzung \ Fed-Einschätzung \ src \ Daten \ Daten-1.json. Origin Null ist nicht zulässig von Access-Control-Allow-Origin.

Referenz: JQuery $.getJSON load local JSON file not working

Sie definieren Abzeichen als class kein id .So wird die korrekte Syntax

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

dann diese Anweisung document.getElementById("badge").src = data1.badge; wird funktionieren.

Arbeits Demo:

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>

Quelle

2016-11-09 07:25:21

Wie kann ich meine JSON-Daten auf meiner HTML-Seite anzeigen lassen?

Antwort

Verwandte Themen