Home/ Questions/Q 7977921
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T09:20:51+00:00

I want to be able to take a php-supplied json object and put it

  • 0

I want to be able to take a php-supplied json object and put it into html. My old method of just making one incredibly long, incomprehensible string of html and then doing $.append(hmltStr) didn’t go over so well on the last time I posted it about it on SO. I wonder if someone can explain to me how to put a json object into html using this template which is apparently an improvement of the John Resign micro-template.

Given the object:

{
"order": {
    "name": "TRADEMARK WHEEL COMPANY",
    "sales_order_id": "18278",
    "order_date": "05 \u2044 15 \u2044 2012",
    "due_date": "05 \u2044 21 \u2044 2012",
    "order_number": "1213140",
    "reference": "21192D\/35546",
    "order_description": "BICICLETTE",
    "ship_name": "ADAMS",
    "ship_address1": "1919 W RANDOLPH ST.",
    "ship_address2": "",
    "ship_city": "CHICAGO",
    "ship_state": "IL",
    "ship_postal_code": "60606",
    "ship_country": null,
    "ship_via": "FEDEX GROUND",
    "tracking_number": null,
    "package_contents": null,
    "freight": "0.00",
    "taxable": "0.00",
    "nontaxable": "748.88",
    "sales_tax": "0.00"
},
"line_item": [{
    "description": "RED ONE",
    "quantity": "2.00",
    "sell_price": "349.44"
},
{
    "description": "FRONT GEAR",
    "quantity": "2.00",
    "sell_price": "15.00"
},
{
    "description": "5th GEAR",
    "quantity": "2.00",
    "sell_price": "10.00"
}]

}

is the data being gathered by this ajax request, how can I populate an html table with it in the success part of this ajax function

$.ajax({
    type: "POST",
    url: "getJSON.php",
    data: submitStr,
    success: function (data) {

    //populate order details

    //loop through variable number of line items

}

<html>

<table id="contentTable">
</table>

</html>

Also, what is the <script type="html/javascript></script> tag. This may or may not be relevant, but I have seen it in templating; do I need to use that?

Thanks for the help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    HTML

    a. include jQuery script, something like this:

    <script src=".../libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

    b. include vkTemplate plugin, something like this:

    <script src="vktemplate.js" type="text/javascript"></script>

    c. in your html page add an element you want to inject this table, for example:

     <div id="container"></div>

    TEMPLATE

    (note, that line_item is array, so you to order and to line_item differently)

    <table id="contentTable">
    <tr>
        <td>
            label-one:
        </td>
        <td>
            <%= o.order.name %> 
        </td>
    </tr>
    <tr>
        <td>
            label-two:
        </td>
        <td>
            <%= o.line_item[0].description %> 
        </td>
    </tr>
</table>

    save this template ( for example as order.tmpl ) on your web server

    JAVASCRIPT

    initialize vkTemplate plugin and provide template URL as the first parameter, and json_data URL as the second parameter

    $('#container').vkTemplate( 'order.tmpl', 'getJSON.php' );

    At this point you’re done.

    Hope that helps

    -Vadim

    • 0