how to read data from json to View using jquery mvc

Question

I have the following data in an array.

[{"FirstName":"Nancy","LastName":"Davolio","Title":"Sales Representative"},
{"FirstName":"Andrew","LastName":"Fuller","Title":"Vice President, Sales"}]

I want to present this data using jquery into a table like this :

 <table id="employee">
 <tr>
 <td>Nancy</td>
 <td>Davolio</td>
 <td>Sales Representative</td>
 ...
 </table>

A bit more context and details would be welcomed. What are you trying to achieve? A sample of the view and backend code would be also great. — rivarolle
– rivarolle, Commented Sep 26, 2013 at 15:33
So my goal is, get the data from my controller using ViewData and put the retrieved values on View on just a click of a button using jquery and without refreshing the page, here is the backend code for my View: — Francis Padron
– Francis Padron, Commented Sep 26, 2013 at 21:38
View:@{ var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); var employees = @serializer.Serialize(ViewData["Employees"]); } $("#employee").append("<tr><td>" + "@employees.toString" + "</td></tr>");-so basically I want to append the serialized data to my table which you can see from above. — Francis Padron
– Francis Padron, Commented Sep 26, 2013 at 21:50
@Scott.N, what more do you want than the current supplied answer? — Dave Alperovich
– Dave Alperovich, Commented Oct 16, 2013 at 21:11
I got this working using - $.ajax ( { url: 'localhost:32709/Emplyees/Get', type: 'GET', datatype: 'json', success: function (data) { $.each ( data, function (key, employee) { $("#empTable").append("<tr><td>" + employee.FirstName + "</td></tr>"); } ); } } ); — Francis Padron
– Francis Padron, Commented Oct 21, 2013 at 0:24

Mr.LamYahoo · Accepted Answer · 2013-09-26 15:45:58Z

6

+50

similar

$(document).ready(function() {
      var jsonp = '[{"Lang":"jQuery","ID":"1"},{"Lang":"C#","ID":"2"}]';
      var lang = '';
      var obj = $.parseJSON(jsonp);
      $.each(obj, function() {
          lang += this['Lang'] + "<br/>";
      });
      $('span').html(lang);
    });

answered Sep 26, 2013 at 15:45

Mr.LamYahoo

1,54614 silver badges28 bronze badges

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

6 Comments

Francis Padron Over a year ago

I declared my data using razor at my View page and used serialization '@model IEnumerable<MVCvs2012.Models.Employees> @{ var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); var employees = @serializer.Serialize(ViewData["Employees"]); }'

Francis Padron Over a year ago

This totally works . . . but the data of my jsonp is coming from a ViewData, can you please advise me on this one? please...

Mr.LamYahoo Over a year ago

var jsonp = '@ViewData["key"]';

Francis Padron Over a year ago

Theres no data appending on my table var j = '@ViewData["Employees"]'; var json = $.parseJSON(j); $(json).each(function (i, val) { $.each(val, function (k, v) { $("#employee").append("<tr><td>" + k + " : " + v + "</td></tr>"); });

Mr.LamYahoo Over a year ago

make sure @ViewData["Employees"] is a string with json format. You can try alert(j) to test before run function.

|

Daniel Dawes · Accepted Answer · 2013-09-26 15:39:10Z

2

I did something like this before:

var apiUrl = 'UrlOfData';
$(document).ready(function () {
    $.getJSON(apiUrl)
        .done(function (data) {
            for (var item in data){
                $('#people').append(item.FirstName);
            }
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#people').text('Error: ' + err);
        });
});

answered Sep 26, 2013 at 15:39

Daniel Dawes

1,0056 silver badges16 bronze badges

2 Comments

Francis Padron Over a year ago

boldI declared my data using razor at my View page '@model IEnumerable<MVCvs2012.Models.Employees> @{ var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); var employees = @serializer.Serialize(ViewData["Employees"]); }'

gudatcomputers Over a year ago

Don't use JavaScriptSerializer... it's kinda terrible. Try JSON.NET james.newtonking.com/json

rivarolle · Accepted Answer · 2013-09-26 22:03:48Z

0

I don't believe you need jQuery for this. A foreach in razor should be enough. Something like this should work (given that the model passed is IEnumerable) :

<table id="employee">
@foreach (var employee in Model)
{
 <tr>
  <td>@employee.LastName</td>
  <td>@employee.FirstName</td>
  <td>@employee.TItle</td>
 </tr>
}
</table>

answered Sep 26, 2013 at 22:03

rivarolle

1,53811 silver badges18 bronze badges

1 Comment

Francis Padron Over a year ago

So my goal is, get the data from my controller using ViewData and put the retrieved values on View on just a click of a button using jquery and without refreshing the page.

zinking · Accepted Answer · 2013-10-23 12:35:09Z

it is understood that for simple ops like this, manually assemble DOM is okay. But I am still a bit surprised that no one mentioned jquery templating.

see details from this link: Jquery Template, With below contents cited there.

The plugin parses a template using data attributes to populate the data. Simply pass in a JavaScript object, and the plugin does the rest.

An example template is below:

<script type="text/html" id="template">
     <div data-content="author"></div>
     <div data-content="date"></div>
     <img data-src="authorPicture" data-alt="author"/>
     <div data-content="post"></div> </script>

And to use this do the following:

 $("#template-container").loadTemplate($("#template"),
     {
         author: 'Joe Bloggs',
         date: '25th May 2013',
         authorPicture: 'Authors/JoeBloggs.jpg',
         post: 'This is the contents of my post'
     });

Similarly the content of the template could be held in a separate html file without the enclosing script tag, and used like the following:

 $("#template-container").loadTemplate("Templates/template.html",
     {
         author: 'Joe Bloggs',
         date: '25th May 2013',
         authorPicture: 'Authors/JoeBloggs.jpg',
         post: 'This is the contents of my post'
     });

The plugin has a number of data-... attributes that can be used to populate various attributes with the data. There is also the powerful data-template-bind attribute that accepts a JSON object, enabling binding to any attribute, or the content of the element.

Collectives™ on Stack Overflow

how to read data from json to View using jquery mvc

4 Answers 4

6 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related