CODEWITHSUNDEEP
jsonjquery
Khekhekhe
Khekhekhe

Reputation: 53

Display JSON object's contents returned from an URL on an html page

I have JSON object returned from an URL in the format

<pre>
    [{"merchant":"eletspay","accountName":"hello","accountType":"Savings","ifscCode":"5545","email":"[email protected]","phoneNum":"98654567876","isDefaultAccount":false},{"merchant":"eletspay","accountName":"helloi32irn","accountType":"Savings","ifscCode":"5545","email":"[email protected]","phoneNum":"98654567876","isDefaultAccount":false}]
    </pre>

And I want to loop through the JSON object for each index to display all of the contents in an html table where the table is

<pre>
<table class= "dataTable">
                    <tr>
                    <td><input type="radio" name="activate"></td>
                    <td>jsonObject[1.value]</td>
                    <td>jsonObject[1.value]</td>
                    <td>jsonObject[1.value]</td>
                    <td>jsonObject[1.value]</td>
                    <td>jsonObject[1.value]</td>
                    <td>jsonObject[1.value]</td>

                    </tr>
<tr>
                    <td><input type="radio" name="activate"</td>
                    <td>jsonObject[2.value]</td>
                    <td>jsonObject[2.value]</td>
                    <td>jsonObject[2.value]</td>
                    <td>jsonObject[2.value]</td>
                    <td>jsonObject[2.value]</td>
                    <td>jsonObject[2.value]</td>
                                            </tr>
</table>
</pre>

Where jsonObject[1.value] will be the data at index 1 and jsonObject[2.value] will be the data at index 2 and so on.

PS: I'm new to Javascript and hence Jquery, so please ingore/rectify any stupid errors in the html part.

Upvotes: 0

Views: 2265

Answers (2)

mali303
mali303

Reputation: 605

Try this http://jsfiddle.net/aBZDg/13/:

var jsonData = [{"merchant":"eletspay","accountName":"hello","accountType":"Savings","ifscCode":"5545","email":"[email protected]","phoneNum":"98654567876","isDefaultAccount":false},{"merchant":"eletspay","accountName":"helloi32irn","accountType":"Savings","ifscCode":"5545","email":"[email protected]","phoneNum":"98654567876","isDefaultAccount":false}];

function writeTable() {
    var out = '';

    for(var row=0; row<jsonData.length; row++) {
        out += '<tr>'
                + '<td>' + jsonData[row].merchant + '</td>'
                + '<td>' + jsonData[row].accountName + '</td>'
                + '<td>' + jsonData[row].accountType + '</td>'
                + '<td>' + jsonData[row].ifscCode + '</td>'
                + '<td>' + jsonData[row].email + '</td>'
                + '<td>' + jsonData[row].phoneNum + '</td>'
                + '<td>' + jsonData[row].isDefaultAccount + '</td>'
                + '</tr>';
    }

    document.write(out);
}​

and then call this function where you want to show table.

<table border="1">
    <tr>
        <th>Merchant</th>
        <th>AccountName</th>
        <th>AccountType</th>
        <th>IfscCode</th>
        <th>Email</th>
        <th>PhoneNum</th>
        <th>IsDefaultAccount</th>
    </tr>
    <script>writeTable();</script>
</table>

Upvotes: 1

Rusty
Rusty

Reputation: 1303

Try using the jquerytemplate

http://www.diplo.co.uk/blog/2011/3/1/using-jquery-templates-to-bind-to-json-data.aspx

This will loop the json data returned from your url

Upvotes: 0

Related Questions