JSON：getElementByIdは未定義を返す

Question

私はバーコードを書くテキスト入力を持っています。これはデータベースから名前と価格を返します。

私のコードは次のようになります。

ビュー：

<script> 
function showProduct(str) { 
    if (str == "") { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       console.log(this.responseText); 
       var jsonObject = JSON.stringify(this.responseText); 
       document.getElementById("nameHint").innerHTML = jsonObject["name"]; 
       document.getElementById("priceHint").innerHTML = jsonObject["price"]; 
} 
     }; 
     xmlhttp.open("GET","/getproduct/q="+str,true); 
     xmlhttp.send(); 
    } 
} 
</script> 
{{ Form::open() }} 
{{Form::text('barcode', null, ['onchange'=>"showProduct(this.value)"])}} 
<div id="nameHint></div> 
<div id="priceHint></div> 
{{Form::close}} 

コントローラ：私はバーコードを書くとき

public function getProduct($id){ 
    ini_set('display_errors', 1);error_reporting(E_ALL); 

    $sql = DB::select('select * from inventory where barcode = ?', [$id]); 
    $name = $sql[0]->name; 
    $price= $sql[0]->price; 

    echo json_encode(array("name"=>$name, "price"=>$price)); 
} 

それは示しています。それは名前を表示しなければならなかったundefinedと価格。私が忘れたのは？

Answer 1

JSON文字列（this.responseText）があり、JavaScriptオブジェクト（jsonObject）が必要です。 JSON.parseを使用して、JSON文字列をJSON.stringifyの代わりにJavaScriptオブジェクトに変換すると、JavaScriptオブジェクトがJSON文字列に変換されます。

var jsonObject = JSON.parse(this.responseText); 
       // ^-- here