Question

所以我只是想弄清楚如何在标题（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
  }
 ]

Answer 1

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

[coderhub@Coderhub-mac heroku]$ssh -v git@heroku.com
OpenSSH_7.9p1, LibreSSL 2.7.3
debug1: Reading configuration data /Users/coderhub/.ssh/config
debug1: /Users/coderhub/.ssh/config line 1: Applying options for heroku.com
debug1: Reading configuration data /etc/ssh/ssh_config
debug1: /etc/ssh/ssh_config line 48: Applying options for *
debug1: Connecting to heroku.com port 22.
debug1: Connection established.
debug1: identity file /Users/coderhub/.ssh/id_rsa.pub type 0
debug1: identity file /Users/coderhub/.ssh/id_rsa.pub-cert type -1
debug1: Local version string SSH-2.0-OpenSSH_7.9
debug1: Remote protocol version 2.0, remote software version endosome
debug1: no match: endosome
debug1: Authenticating to heroku.com:22 as 'git'
debug1: SSH2_MSG_KEXINIT sent
debug1: SSH2_MSG_KEXINIT received
debug1: kex: algorithm: curve25519-sha256@libssh.org
debug1: kex: host key algorithm: ssh-rsa
debug1: kex: server->client cipher: chacha20-poly1305@openssh.com MAC: <implicit> compression: none
debug1: kex: client->server cipher: chacha20-poly1305@openssh.com MAC: <implicit> compression: none
debug1: expecting SSH2_MSG_KEX_ECDH_REPLY
debug1: Server host key: ssh-rsa SHA256:8tF0wX2WquK45aGKs/Bh1dKmBXH08vxUe0VCJJWOA/o
debug1: Host 'heroku.com' is known and matches the RSA host key.
debug1: Found key in /Users/coderhub/.ssh/known_hosts:33
debug1: rekey after 134217728 blocks
debug1: SSH2_MSG_NEWKEYS sent
debug1: expecting SSH2_MSG_NEWKEYS
debug1: SSH2_MSG_NEWKEYS received
debug1: rekey after 134217728 blocks
debug1: Will attempt key: /Users/coderhub/.ssh/id_rsa.pub RSA SHA256:suGiIhQN6QphoPJwM4YecZDiTRjNZIPHh46ur58TbvA explicit
debug1: SSH2_MSG_SERVICE_ACCEPT received
debug1: Authentications that can continue: publickey
debug1: Next authentication method: publickey
debug1: Offering public key: /Users/coderhub/.ssh/id_rsa.pub RSA SHA256:suGiIhQN6QphoPJwM4YecZDiTRjNZIPHh46ur58TbvA explicit
debug1: Server accepts key: /Users/coderhub/.ssh/id_rsa.pub RSA SHA256:suGiIhQN6QphoPJwM4YecZDiTRjNZIPHh46ur58TbvA explicit
**Load key "/Users/coderhub/.ssh/id_rsa.pub": invalid format**
debug1: No more authentication methods to try.
git@heroku.com: Permission denied (publickey).

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;

}

Answer 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'> 
...

Answer 3

您可以使用Jquery来实现

#!/bin/bash

Pmax="90"
Pmin="10"
Rcor="7.91"  #This converts the pressure setting into the devices scaled range.
declare -a Sinewave20=(0 0.309 0.588 0.809  0.951  1  0.951  0.809  0.580 0.309 0 -0.309 -0.588 -0.809 -0.951 -1 -0.951 -0.809 -0.588 -0.309)
Amplitude=$(( $Pmax-$Pmin ))
Offset=$(( $Pmin+$Amplitude/2  ))

# 6 cycles of Sinewave20 corresponds to 1 min of .1 hz sine wave
for i in {0..6}
do
        # Let's send the commands for a 20 pt sine wave
        for x in "${!Sinewave20[@]}";
        do
                Value=$(( $Amplitude*$Rcor*$Sinewave20[x]+{Offset*$Rcor ))

                echo -e "SET ${Value}\r"  > /dev/ttyUSB1
                sleep 0.5
        done
done

如何在网页上显示JSON数据

3 个答案: