Question

OK so i have this script that submits the input of a search box to a .php and gives back a JSON object in jquery. How can i now change the content of a div. The JSON object that is returnd looks like this:

{"0":"Aardappelen rauw","voedsel":"Aardappelen rauw","1":"88","calorien":"88"}

How can i say that ‘Aardappelen rauw’ should be in div1 and 88 in div 2 for example? I tried with data.voedsel and data.calorien but that doesn’t work..

in head:

<script type="text/javascript">
function contentDisp()
{

$.ajax({
  type: 'POST',
  url: 'getFood.php',
  data: {'foodnametextbox' : $('#food').val() },
  datatype: "json",
  success: function(data){ 

    $('.second').replaceWith(data);

  }
});


}
</script>

in body:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

Answer 1

The dataType: 'json' should automatically call parseJSON. Then you should be able to do data['0'] (or data.voedsel) to get ‘Aardappelen rauw’.

EDIT: Change datatype: "json" to dataType: "json". The ‘t’ in ‘type’ needs to be capital.