在JavaScript中将字符串转换为JSON键

bbmckpt7  于 2023-05-08  发布在  Java
关注(0)|答案(3)|浏览(192)

我有一个JSON文件,它有:{ "a": "letter a", "b": "letter b", "c": "letter c" }
当用户在文本框中键入“b”时,我如何将文本框中的字符串转换成键来访问JS中的JSON中的“b”键?

hrysbysz

hrysbysz1#

首先从用户那里访问值,然后从对象那里访问值,怎么样?

function myFunction() {
  var obj = { "a": "letter a", "b": "letter b", "c": "letter c" };
  var userInput = document.getElementById("user-input").value;
  if(userInput){
  console.log(obj[userInput] ?? "not found");
  }
}
Enter value: <input type="text" id ="user-input" onkeyup="myFunction()">
iklwldmw

iklwldmw2#

您可以使用方括号表示法来访问JavaScript中JSON对象中特定键的值:

var value = jsonObject['userInput'];

例如:

const jsonObject = JSON.parse('{ "a": "letter a", "b": "letter b", "c": "letter c" }');    

var userInput = document.getElementById("textbox").value; // userInput = 'b'

var value = jsonObject[userInput];

console.log(value); // 'letter b'
0g0grzrc

0g0grzrc3#

下面是给定问题的解决方案:
应用程序结构:

app.js文件

const textBox = document.getElementById("textbox");
const valueBox = document.getElementById("valuebox");
let data;
async function main() {
  await fetch("/data.json").then(async (v) => {
    data = await v.json();
  });
  console.log(data);
}
textBox.addEventListener("change", () => {
  let k = textBox.value;
  valueBox.innerHTML = data[k];
});
main();

index.html文件

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <input id="textbox" />
        <div id="valuebox"></div>
      </body>
      <script src="./app.js"></script>
    </html>

data.json文件

{ "a": "letter a", "b": "letter b", "c": "letter c" }

相关问题