如何在HTML頁面上顯示JSON文件

我開始學習javascript。我想在用戶點擊按鈕時在html頁面上顯示姓氏和關係值。我有一個名爲FamilyAndFriends.json一個簡單的JSON文件：如何在HTML頁面上顯示JSON文件

{ 
    "people":[{"fname":"Adam", 
     "lname":"Schmitt", 
      "relation":"Brother", 
      "relationid":"1" 
     }, 
     {"fname":"Andrew", 
     "lname":"Name", 
      "relation":"Brother", 
      "relationid":"1" 
     }, 
     {"fname":"Jenna", 
     "lname":"Name", 
      "relation":"Wife", 
      "relationid":"2" 
     }, 
     {"fname":"Gary", 
     "lname":"Name", 
      "relation":"Father", 
      "relationid":"3" 
     }, 
     {"fname":"Judy", 
     "lname":"Name", 
      "relation":"Mother", 
      "relationid":"4"    
     }, 
     {"fname":"Justin", 
     "lname":"Name", 
      "relation":"Friend", 
      "relationid":"5"    
     }, 
     {"fname":"Billy", 
     "lname":"Name", 
      "relation":"Friend", 
      "relationid":"5"    
     }, 
     {"fname":"Robbie", 
     "lname":"Name", 
      "relation":"Friend", 
      "relationid":"5"    
     }, 
     {"fname":"Dylan", 
     "lname":"Name", 
      "relation":"Friend", 
      "relationid":"5"    
     }, 
     {"fname":"Zach", 
     "lname":"Name", 
      "relation":"Friend", 
      "relationid":"5"    
     }] 
}

我試圖尋找，似乎有很多人建議jQuery的，但我們不能將jQuery的時刻。如何在用戶點擊時從我的.json文件中獲取信息並將其顯示在我的html文件中？感謝您的幫助

來源

2016-09-24 Matthew Schmitt

貴類覆蓋** ** AJAX或**的XMLHttpRequest（）**了嗎？這將是將數據*動態地*轉換成你的頁面的標準方式。如果沒有，有辦法將數據硬編碼/放入頁面中使用。完整的答案需要知道。 – JonSG

是的，他應該。我剛纔還在想了解它，我想 –

HTML代碼：

<ul id="list"></ul>

只要保持在一個變量的JSON數據（或）單獨的文件作爲'FamilyAndFriends.json'。

var data = { 
"people":[{"fname":"Adam", 
    "lname":"Schmitt", 
     "relation":"Brother", 
     "relationid":"1" 
    }, 
    {"fname":"Andrew", 
    "lname":"Name", 
     "relation":"Brother", 
     "relationid":"1" 
    }, 
    {"fname":"Jenna", 
    "lname":"Name", 
     "relation":"Wife", 
     "relationid":"2" 
    }, 
    {"fname":"Gary", 
    "lname":"Name", 
     "relation":"Father", 
     "relationid":"3" 
    }, 
    {"fname":"Judy", 
    "lname":"Name", 
     "relation":"Mother", 
     "relationid":"4"    
    }, 
    {"fname":"Justin", 
    "lname":"Name", 
     "relation":"Friend", 
     "relationid":"5"    
    }, 
    {"fname":"Billy", 
    "lname":"Name", 
     "relation":"Friend", 
     "relationid":"5"    
    }, 
    {"fname":"Robbie", 
    "lname":"Name", 
     "relation":"Friend", 
     "relationid":"5"    
    }, 
    {"fname":"Dylan", 
    "lname":"Name", 
     "relation":"Friend", 
     "relationid":"5"    
    }, 
    {"fname":"Zach", 
    "lname":"Name", 
     "relation":"Friend", 
     "relationid":"5"    
    }] 
};

實例外部JSON使用javascript：

var link; 
for (var t = 0; t < data.people.length; t++){ 
    link = document.createElement("a"+t); 
    var ulist = document.getElementById("list"); 
    var newItem = document.createElement("li"); 
    newItem.appendChild(link); 
    ulist.appendChild(newItem); 
    link.textContent = 'First Name: '+data.people[t].fname + ', Last Name: ' +data.people[t].lname; 
    link.setAttribute('data-ind', t); // ADDED A DATA ATTRIBUTE TO STORE A INDEX VALUE 
    if (typeof window.addEventListener === 'function'){ 
     (function() { 
      link.addEventListener('click', function(){ 
       var indexId = this.getAttribute('data-ind'); //GETTING DATA ATTRIBUTE VALUE 
       indexId = parseInt(indexId); //PARSE FROM STRING TO INTEGER 
       alert(data.people[indexId].relation); // YOU WILL GET THE ACTUAL RELATION VALUE. 

      }); 
     })(link); 
    } 
    }

結果就會像下面，當您單擊第一個列表：

var request = new XMLHttpRequest(); 
request.open('GET', '/my/url', true); // YOUR EXTERNAL JSON URL 

request.onload = function() { 
    if (request.status >= 200 && request.status < 400) { 
    // Success! 
     var data = JSON.parse(request.responseText); 
     var link; 
     for (var t = 0; t < data.people.length; t++){ 
      link = document.createElement("a"+t); 
      var ulist = document.getElementById("list"); 
      var newItem = document.createElement("li"); 
      newItem.appendChild(link); 
      ulist.appendChild(newItem); 
      link.textContent = 'First Name: '+data.people[t].fname + ', Last Name: ' +data.people[t].lname; 
      link.setAttribute('data-ind', t); // ADDED A DATA ATTRIBUTE TO STORE A INDEX VALUE 
      if (typeof window.addEventListener === 'function'){ 
       (function (_td) { 
         link.addEventListener('click', function(){ 
         var indexId = this.getAttribute('data-ind'); //GETTING DATA ATTRIBUTE VALUE 
         indexId = parseInt(indexId); //PARSE FROM STRING TO INTEGER 
         alert(data.people[indexId].relation); // YOU WILL GET THE ACTUAL RELATION VALUE. 

        }); 
       })(link); 
    } 
    } 
    } else { 
     // We reached our target server, but it returned an error 

    } 
}; 

request.onerror = function() { 
    // There was a connection error of some sort 
}; 

request.send();

使用JavaScript內部JSON例

Brother

搖滾吧！

來源

2016-09-24 01:33:08 Sridhar

所以排除了這個問題，如果我理解正確這一點，我不能有一個以.json文件右側的JSON信息？它似乎不喜歡我的.json文件中的var數據。我需要將信息添加到HTML的權利？有沒有辦法通過使用單獨的.json而不是將其放入html文件來完成此操作？ –

即使您將.json文件保存爲單獨的文件。只是你有下面的代碼使用的jQuery或Javascript（vanila）：的Jquery： '$ .getJSON（ '/我/ URL'，函數（數據）{ }）;' – Sridhar

的Javascript： 'VAR請求=新的XMLHttpRequest（）; request.open（'GET'，'/ my/url'，true）; request.onload =函數（）{ 如果（request.status> = 200 && request.status <400）{// 成功！ var data = JSON.parse（request.responseText）; }其他{// 我們到達目標服務器，但它返回一個錯誤 } }; request.onerror =函數（）{// 有某種的連接錯誤}; 請求。發送（）;' – Sridhar

-2

console.log($.parseJSON(yourJsonFile))

有了這個，你將有一個對象與你的JSON文件

來源

2016-09-24 01:07:33

使用jQuery – traktor53

<head> 
 
    <title>JSON Basic</title> 
 
</head> 
 

 
<body> 
 
    <p>Display JSON file on HTML page:</p> 
 
    <p id="demo"></p> 
 
    <button onclick="displayInfo()">Display</button> 
 
    <script> 
 
     var i; 
 
     var peopleinfo = ""; 
 
     var people = [{ 
 
      "fname": "Adam", 
 
      "lname": "Schmitt", 
 
      "relation": "Brother", 
 
      "relationid": "1" 
 
     }, { 
 
      "fname": "Andrew", 
 
      "lname": "Name", 
 
      "relation": "Brother", 
 
      "relationid": "1" 
 
     }, { 
 
      "fname": "Jenna", 
 
      "lname": "Name", 
 
      "relation": "Wife", 
 
      "relationid": "2" 
 
     }, { 
 
      "fname": "Gary", 
 
      "lname": "Name", 
 
      "relation": "Father", 
 
      "relationid": "3" 
 
     }, { 
 
      "fname": "Judy", 
 
      "lname": "Name", 
 
      "relation": "Mother", 
 
      "relationid": "4" 
 
     }, { 
 
      "fname": "Justin", 
 
      "lname": "Name", 
 
      "relation": "Friend", 
 
      "relationid": "5" 
 
     }, { 
 
      "fname": "Billy", 
 
      "lname": "Name", 
 
      "relation": "Friend", 
 
      "relationid": "5" 
 
     }, { 
 
      "fname": "Robbie", 
 
      "lname": "Name", 
 
      "relation": "Friend", 
 
      "relationid": "5" 
 
     }, { 
 
      "fname": "Dylan", 
 
      "lname": "Name", 
 
      "relation": "Friend", 
 
      "relationid": "5" 
 
     }, { 
 
      "fname": "Zach", 
 
      "lname": "Name", 
 
      "relation": "Friend", 
 
      "relationid": "5" 
 
     }]; 
 
     for (i = 0; i < people.length; i++) { 
 
      
 
      peopleinfo += people[i].fname + "<br>" + people[i].lname + "<br>" + people[i].relation + "<br>" + people[i].relationid + "<br><p>********</p>"; 
 
     } 
 

 
     function displayInfo() { 
 
      document.getElementById("demo").innerHTML = peopleinfo; 
 
     } 
 
    </script> 
 
</body>

來源

2016-09-24 05:21:13

好的嘗試，但我認爲你不明白這個問題。無論你做什麼都非常簡單直接。 – Sridhar

如何在HTML頁面上顯示JSON文件

回答

相關問題