Наполните элемент со значением в формате JSON

Question

У меня есть этот тип JSON:

{ 
    "datas": [ 
     { 
      "id": "fruit_name", 
      "value": "Banana" 
     }, 
     { 
      "id": "fruit_description", 
      "value": "This is a banana." 
     }, 
     ... 

Как я могу Autocomplete следующий HTML с их значением?

<div id="fruit_name"></div> 
<div id="fruit_description"></div> 

Я уже пробовал:

function createElements() { 
    // Parse JSON response. 
    var elements = JSON.parse(request.responseText); 

    elements.datas.forEach(function (element) { 
     var div = document.getElementById(element.id); 
     div.innerHTML = element.value; 
    }); 
} 

var request = new XMLHttpRequest();  
request.onreadystatechange = function() { 
    if (request.readyState === 4) { 
     createElements(); 
    } 
} 
request.responseType = "json"; 
request.open("GET", "datas.json", true); 
request.send(); 

Но это не работает, и у меня есть эта ошибка:

[Error] InvalidStateError: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable. 
    createElements (index.html, line 20) 
    onreadystatechange (index.html, line 31) 

Любой для помочь мне с этим, пожалуйста?

Спасибо.

Answer 1

request, возможно, не определен (в объеме) в вашей функции. Либо вы можете позвонить и использовать this или из следующих

function createElements(request) {//Get the 'request' passed. 
    // Parse JSON response. 
    var elements = JSON.parse(request.responseText); 

    elements.datas.forEach(function (element) { 
     var div = document.getElementById(element.id); 
     div.innerHTML = element.value; 
    }); 
} 

var request = new XMLHttpRequest();  
request.onreadystatechange = function() { 
    if (request.readyState === 4) { 
     createElements(request);//Pass in 'request' 
    } 
} 

request.responseType = "application/json";//Remove line if there are errors 
request.open("GET", "datas.json", true); 
request.send();