如何在网页上显示 JSON 数据答案

【问题标题】：how to display JSON data on web page如何在网页上显示 JSON 数据
【发布时间】：2019-12-05 12:11:08
【问题描述】：

所以我只是想弄清楚如何在我的网页上的标题 (h1) 温度（摄氏度）下的输入框中显示来自我的 Data.json 文件的数据。我正在寻找最简单的方法。

这是我的html

  <!doctype html>
  <link rel="stylesheet" type="text/css" href="card.css">
  <html lang="en">
  <head>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Filtered Input</title>

  </head>

  <body>

    <div id="root"></div>

    <h1>Temperature (Degrees Celsius)</h1>
    <label>Enter List of Temperatures in Degrees Celsius here</label>  

    <input type="text" id='Data.json'>


    <h2>Temperature (Degrees Farenheit)</h2>

    <label>Enter List of Temperatures in Degrees Farenheit here</label> 
    <input type="text" id='new_element'> 

</body>

还有我的css

  h1 {
 padding: 60px;
 text-align: center;
 background: #1abc9c;
 color: white;
 font-size: 40px;
 }

h2 {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 40px;

}

这是我的 Data.json

 [
  {
   "1": 23,
   "2": 30,
   "3": 40,
   "4": 41,
   "5": 19
  }
 ]

【问题讨论】：

最简单的方法是复制您的 JSON 并将其粘贴到您的 HTML 文件中。

标签： html css json

【解决方案1】：

您所要做的就是在适当的位置通过 ID 获取元素，然后将 JSON 调用到您可以使用的变量中。

var Data =  [  {   "1": 23,   "2": 30,   "3": 40,   "4": 41,   "5": 19  } ];


let temp = document.getElementById('temp');
temp.innerHTML = Data[0]["1"];


let data1 = document.getElementById('Data.json')
data1.onchange = function(){

temp.innerHTML = Data[0][data1.value];
};

h1 {
 padding: 60px;
 text-align: center;
 background: #1abc9c;
 color: white;
 font-size: 40px;
 }

h2 {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 40px;

}

<!doctype html>
  <link rel="stylesheet" type="text/css" href="card.css">
  <html lang="en">
  <head>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Filtered Input</title>

  </head>

  <body>

    <div id="root"></div>

    <h1 id='temp'>Temperature (Degrees Celsius)</h1>
    <label>Enter List of Temperatures in Degrees Celsius here</label>  

    <input type="text" id='Data.json'>


    <h2>Temperature (Degrees Farenheit)</h2>

    <label>Enter List of Temperatures in Degrees Farenheit here</label> 
    <input type="text" id='new_element'> 

</body>

【讨论】：

行得通！但我被告知我需要从 Data.json 发布数据。
好的，所以更新了我的答案以反映更改数字，然后单击输入，它将更新

【解决方案2】：

简单...

let n = [{
      "1": 23,
      "2": 30,
      "3": 40,
      "4": 41,
      "5": 19
}];

document
  .getElementById('temps')
  .value = JSON.stringify(n);

HTML（只需更改您的输入 ID）

...
    <input type="text" id='temps'> 
...

【讨论】：

【解决方案3】：

你可以通过使用Jquery来实现它

$.getJSON( "yourPath/data.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "key:" + key + "value:" + val );
  });

  $('#yourId').val(item);
});

【讨论】：