calling json URL in MVC 4 - asp.net

Question

i made an ASP.NET WEB API which fetch the detail of customer & nutrient in json format. i deployed my API on IIS & it is working fine. Now i want to use the URL of that API on my MVC project.My URL is like this "http:/localhost:12/customernutrient/customernutrient?o=json" and class is like this
public class Header
{
public string api_ver { get; set; }
public int req_type { get; set; }
public int code { get; set; }
public string description { get; set; }
}
public class Customer
{
public int customerId { get; set; }
public string customerName { get; set; }
}
public class Nutrient
{
public int nutrientId { get; set; }
public string nutrientName { get; set;}
}
public class Body
{
public List<Customer> customer { get; set; }
public List<Nutrient> nutrient { get; set; }
}
public class RootObject
{
public Header header { get; set; }
public Body body { get; set; }
}
how with the help of my link i call my API & display the content in some what like label or something.I want to display this data in different labels
{
"header": {
"api_ver": "1.2",
"req_type": 1,
"code": 1,
"description": "Successful output"
},
"body": {
"customer": [
{
"customerId": 1,
"customerName": "Roundys1"
},
{
"customerId": 2049,
"customerName": "Test"
}
],
"nutrient": [
{
"nutrientId": 1,
"nutrientName": "Calcium"
},
{
"nutrientId": 2,
"nutrientName": "Calories"
},
{
"nutrientId": 3,
"nutrientName": "Cholesterol"
},
{
"nutrientId": 4,
"nutrientName": "Dietary Fiber"
},
{
"nutrientId": 5,
"nutrientName": "Iron"
},
{
"nutrientId": 6,
"nutrientName": "Polyunsaturated Fat"
},
{
"nutrientId": 7,
"nutrientName": "Potassium"
},
{
"nutrientId": 8,
"nutrientName": "Protein"
},
{
"nutrientId": 9,
"nutrientName": "Saturated Fat"
},
{
"nutrientId": 10,
"nutrientName": "Sodium"
},
{
"nutrientId": 11,
"nutrientName": "Sugars"
},
{
"nutrientId": 12,
"nutrientName": "Total Carbohydrate"
},
{
"nutrientId": 13,
"nutrientName": "Total Fat"
},
{
"nutrientId": 14,
"nutrientName": "Vitamin A"
},
{
"nutrientId": 15,
"nutrientName": "Vitamin C"
}
]
}
}
please share your possible solution

Answer 1

You can use ajax call to populate your view. assuming that you want to populate the data on click of a button whose id = 'btnpopulatedata'
<script>
$(document).ready(function () {
var itemName = "#btnpopulatedata";
$(itemName).click(function () {
$.ajax({
type: 'GET',
dataType: 'Json',
url: 'http:/localhost:12/customernutrient/customernutrient?o=json',
success: function (data) {
//write your logic to parse Json and populate the view controls.
},
error: function () {
alert("Error);
},
});
});
});
</script>