CODEWITHSUNDEEP
javascripthtmljson
user2877744
user2877744

Reputation: 93

Fill HTML with JSON data

I'm sure this is an easy one but i have just no idea how to make this happen. I got a PHP file which reads some data from a MySQL database and return the data in a JSON format. Now i am looking for a way to put this data in HTML, so that "data_from_json" is replaced with "18.5" (in this case). Any help is appreciated.

HTML:

<div class="container">
    <div class="bs-example bs-example-type">
      <table class="table">
        <tbody>
          <tr>
            <td>Temperature</td>
            <td align="right"> "data_from_json" </td>
          </tr>
        </tbody>
      </table>
    </div>
</div>

JSON content:

[[18.5]]

Upvotes: 0

Views: 2191

Answers (3)

Nunners
Nunners

Reputation: 3047

You can use jQuery.Ajax to call the PHP page and load the data it returns.

    $.ajax({
        url: 'data_to_load.php',
        type: 'GET',
        dataType: 'JSON',
        contentType: 'application/json;charset=utf-8;',
        success: function (data) {
            //Use data.d to access the JSON object that is returned.
        },
        error: function (ajaxrequest) {
            //Use ajaxrequest.responseText to access the error that is returned.
        }
    })

You can also view a Pure Javascript Ajax example here.

Upvotes: 1

Sheldon
Sheldon

Reputation: 39

could you try <td align="right"> "<?php echo $data_from_json[0][0] ?>" </td>. Update your php variable data_from_json to $data_from_json.

I am a new php guy. this is just a suggestion.

Upvotes: 0

Manish Mishra
Manish Mishra

Reputation: 12375

I am assuming your html file is different and your php script file is different,

you can simply make an ajax request to the php script and consume its return type, then inside the success event of the ajax request, you can set the required td's innerText i.e. in your html page, at the end of the body tag, you can create a script like this:

<script language="javascript" type="text/javascript">
        //variables
        var scriptToExecute="myDbReader.php";//php script

        //any data that you might want to send to the php script.
        var data ='anyData='+anyValue; 

        //call ajax function 
        makeAjaxRequest(scriptToExecute,data,callBack);
        function callBack(data){
            $('#td').html(data);
        }
</script>

where td is the id of the td, you want to set text of and makeAjaxRequest is a simple function that performs ajax request via traditional XHR or modern jQuery's ajax i.e.

function makeAjaxRequest(url,data,_callBack,_failure){
    $.ajax({
       url:url,
       datatype:"application/json",
       type:'get',
       data: data, 
       success:function(data){
           _callBack(data);
       },
       error:function(jqXHR, textStatus, errorThrown){
          if(!_failure){
            console.log(errorThrown);
          }
          else
          {
            _failure(jqXHR,textStatus,errorThrown);
          }
       }
    });
}

Upvotes: 1

Related Questions