Display list data using jQuery and Ajax

Question

I have the following structure:

WebService - get the data from database and return the list of persons
ASP.NET MVC application - uses web service from 1).

There's a method in HomeControler:

public JsonResult GetDbData()
{
    WebService1SoapClient client = new WebService1SoapClient();
    List<Person> lstPersons = client.GetPersons();

    return Json(lstPersons, JsonRequestBehavior.AllowGet);
}

I'd like to display the list of persons in Index.cshtml view using jQuery Ajax call in this manner:

<div>
    <div id="div3">Database data.</div>
</div>

<input id="btnGetDBData" type="button" value="GetDBData" />

$('#btnGetDBData').click(function () {
    $.ajax({
        url: "/Home/GetDbData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $("#div3").html(data);
        },
        error: function (xhr, status) {
            alert(status);
        }
    });
});

But, it's not working.

I'm new in jQuery and need some kind of table or template or something like repeater that can display the list or table structure.

The Person class looks as following:

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

I need to display the list of persons in Html table.

you are returning an array, you should try loop or access it using an array index => stackoverflow.com/questions/15848183/… — Idrees Khan
– Idrees Khan, Commented Jul 23, 2013 at 9:12
make a partial view, showing the list and return it from your action. — Zaheer Ahmed
– Zaheer Ahmed, Commented Jul 23, 2013 at 9:21

Simon Hughes · Accepted Answer · 2015-09-22 15:43:41Z

8

Why you are setting content of div3 with .html?

success: function (data) {
    $("#div3").html('');
    var div3Content = '';
    for(var i = 0; i < data.length; i++)
    {
       div3Content += '<p>' + data[i].Name + '</p>'; // if Name is property of your Person object
    }
    $("#div3").append(div3Content);
},

In this way, Person names will be added into div3 as <p> tag

edited Sep 22, 2015 at 15:43

Simon Hughes

3,5943 gold badges27 silver badges46 bronze badges

answered Jul 23, 2013 at 9:02

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Paritosh Over a year ago

@FSou1: typo mistake, thanks for pointing that out - corrected

Satpal Over a year ago

$("#div3").html(''); will clear div in every iteration and only last data will be displayed

Paritosh Over a year ago

@Satpal: already updated. it'll clear div3 after each call to server, and than update the content as per the result

tesicg Over a year ago

I don't really need div. It could be Html table.

Paritosh Over a year ago

@tesicg: in that case, instead of $("#div3").append('<p>'+data[i].Name+'</p>');, you'll just have to append row in table - $("#div3").append('<tr><td>'+data[i].Name+'</td></tr>');

|

Maxim Zhukov · Accepted Answer · 2013-07-23 09:10:18Z

2

In your data variable in success method you have an array of your data and you have to draw it manually

success: function (data) {
    $.each(data, function (index, value) {
        $("#div3").append(value.Id + '|' + value.FirstName + '|' + value.LastName);
    });
}

edited Jul 23, 2013 at 9:10

answered Jul 23, 2013 at 8:59

Maxim Zhukov

10.2k5 gold badges50 silver badges92 bronze badges

5 Comments

tesicg Over a year ago

I know that and I ask for help how to do that.

Maxim Zhukov Over a year ago

You have data array in function, where each element is an object (isn't it?) So you could make it with jQuery

Maxim Zhukov Over a year ago

We don't how you would like to display it and what properties do you have

tesicg Over a year ago

Yes. Please, take a look at the original post. There are required details.

Maxim Zhukov Over a year ago

For example, you could use it like this,- you have to decide your own output format

chiccodoro · Accepted Answer · 2013-07-23 09:10:17Z

0

$('#div3').html(data) sets the HTML literally to what is found in data. However, after your jQuery call data contains an array of objects, not HTML. You first need to define what the HTML should look like. - Do you want it as a unordered list, a table, an array of nice-looking tiles, ...?

For rendering HTML from data I suggest you also consider templating and/or data-binding libraries such as, e.g. knockout which allows you to define the template in HTML:

<ul data-bind="foreach: persons">
    <li data-bind="text: LastName"></li>
</ul>

and your jQuery ajax success callback:

success: function (data) {
    ko.applyBindings({ persons: data });
}

The knockout foreach binding as above is kind of a repeater as you asked for.

Update: If you want a table the knockout template simply changes to something like:

<table>
    <thead><tr><th>First Name</th><th>Last Name</th><th>Full Name</th></tr></thead>
    <tbody data-bind="foreach: persons">
        <tr>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td data-bind="text: FirstName() + ' ' + LastName()"></td>
        </tr>
    </tbody>
</table>

edited Jul 23, 2013 at 9:10

answered Jul 23, 2013 at 9:05

chiccodoro

14.7k20 gold badges93 silver badges133 bronze badges

2 Comments

tesicg Over a year ago

Yes. Please, take a look at the original post. There are required details.

chiccodoro Over a year ago

@tesicg: I have updated my answer - you can use foreach like a repeater, i.e. you can do whatever you like with it, it does not need to be either of a table or a list. The snipped above only serves as an example.

Collectives™ on Stack Overflow

Display list data using jQuery and Ajax

3 Answers 3

6 Comments

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related