calling json URL in MVC 4

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>