Json 中的 Javascript 搜索

Question

I am totally new to Javascript and I have a small problem here. When I am trying to get from Element value it works correctly(console shows value fine), but when I am trying to add this variable to the JSON It says: "Uncaught TypeError: Cannot read property 'meanings' of undefined at XMLHttpRequest.request.onload."

Here is the code:

    // Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://raw.githubusercontent.com/davidluzgouveia/kanji-data/master/kanji-jouyou.json', true)

request.onload = function () {
  // Begin accessing JSON data here
  
  // Begin accessing JSON data here
var data = JSON.parse(this.response)   
 
 var kanji = document.getElementById("kanji").value;  

 console.log(kanji);
 



 //  document.getElementById("on").innerHTML = data.日.readings_on;   ------ WORKS CORRECTLY
 document.getElementById("reading").innerHTML = data.kanji.meanings; ------ DOESN'T WORK
 document.getElementById("kun").innerHTML = data.kanji.readings_kun; ------ DOESN'T WORK
 document.getElementById("on").innerHTML = data.kanji.readings_on;   ------ DOESN'T WORK
 

 
 **// IF INSTEAD OF kanji I will put something else for example 日 my code works as it should.**

 
 }

request.send();

Answer 1

You could try fetch . See the example below:

 fetch('https://raw.githubusercontent.com/davidluzgouveia/kanji-data/master/kanji-jouyou.json') .then(response => response.json()) .then(data => { let kanji = document.getElementById('kanji').value; console.log('Success: ', data[kanji].meanings); // json data returned, write the rest of your code here // .... }) .catch((error) => { console.error('Error:', error); });

 <input type="text" id="kanji" value="日" />