Populate HTML Table from JSON string using AngularJS in ASP.Net MVC

Hi sanvi,

For reading the Json Data I have used Newtonsoft dll. You can get it from the below link.

Using the DLL from here.

http://james.newtonking.com/json/help/index.html

Model

public class Employee
{
    public string Name { get; set; }
    public Address Address { get; set; }
    public List<PhoneNumber> PhoneNumbers { get; set; }
    public string DOJ { get; set; }
}

public class Address
{
    public string House { get; set; }
    public string Area { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}

public class PhoneNumber
{
    public string UniqueNumber { get; set; }
    public string CityCode { get; set; }
    public string CountryCode { get; set; }
}

Namespaces

using System.IO;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        List<Employee> emp = new List<Employee>();
        return View(emp);
    }

    public JsonResult Display(int id)
    {
        StreamReader stRead = new StreamReader(Server.MapPath("~/Sample.json"));
        JArray employees = (JArray)JsonConvert.DeserializeObject(stRead.ReadToEnd());
        List<Employee> emp = new List<Employee>();
        for (int i = 0; i < employees.Count; i++)
        {
            JObject employee = (JObject)JsonConvert.DeserializeObject(employees[i].ToString());
            string name = Convert.ToString(employee["name"]).Replace("\"", "");
            string address = Convert.ToString(employee["address"]).Replace("\"\"", "");
            string DOJ = Convert.ToString(employee["DOJ"]).Replace("\"", "");
            Address add = new Address();
            if (!string.IsNullOrEmpty(address))
            {
                JObject addresss = (JObject)JsonConvert.DeserializeObject(address);
                string country = Convert.ToString(addresss["country"]).Replace("\"", "");
                string cityName = Convert.ToString(addresss["cityName"]).Replace("\"", "");
                string areaName = Convert.ToString(addresss["areaName"]).Replace("\"", "");
                string houseNumber = Convert.ToString(addresss["houseNumber"]).Replace("\"", "");
                add.House = houseNumber;
                add.Area = areaName;
                add.City = cityName;
                add.Country = country;
            }
            List<PhoneNumber> phones = new List<PhoneNumber>();
            if (!string.IsNullOrEmpty(Convert.ToString(employee["phoneNumbers"])))
            {
                JArray phoneNumbers = (JArray)JsonConvert.DeserializeObject(Convert.ToString(employee["phoneNumbers"]));
                for (int j = 0; j < phoneNumbers.Count; j++)
                {
                    string cityCode = Convert.ToString(phoneNumbers[j]["cityCode"]).Replace("\"", "");
                    string countryCode = Convert.ToString(phoneNumbers[j]["countryCode"]).Replace("\"", "");
                    string uniqueNumber = Convert.ToString(phoneNumbers[j]["uniqueNumber"]).Replace("\"", "");
                    phones.Add(new PhoneNumber { CityCode = cityCode, CountryCode = countryCode, UniqueNumber = uniqueNumber });
                }
            }
            emp.Add(new Employee { Name = name, Address = add, PhoneNumbers = phones, DOJ = DOJ });
        }

        return Json(emp);
    }
}

View

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        $scope.IsVisible = false;
        $scope.GenerateTable = function () {
            $.post("/Home/Display", { id: 1 }, function (r) {
                $scope.Employees = r;
                $scope.IsVisible = true;
            });
        };
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="Generate Table" ng-click="GenerateTable()" />
    <hr />
    <table ng-show="IsVisible">
        <tr>
            <th>Name</th>
            <th>DOJ</th>
            <th>House</th>
            <th>Area</th>
            <th>City</th>
            <th>Country</th>
            <th>Phone</th>
        </tr>
        <tbody ng-repeat="e in Employees">
            <tr>
                <td>{{e.Name}}</td>
                <td>{{e.DOJ}}</td>
                <td>{{e.Address.House}}</td>
                <td>{{e.Address.Area}}</td>
                <td>{{e.Address.City}}</td>
                <td>{{e.Address.Country}}</td>
                <td>
                    <table>
                        <tr>
                            <th>Number</th>
                            <th>City Code</th>
                            <th>Country Code</th>
                        </tr>
                        <tbody ng-repeat="p in e.PhoneNumbers">
                            <tr>
                                <td>{{p.UniqueNumber}}</td>
                                <td>{{p.CityCode}}</td>
                                <td>{{p.CountryCode}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Screenshot

Json Data

[
  {
    "name": "Ameena"
  },
  {
    "name": "Savita"
  },
  {
    "name": "Kavita"
  },
  {
    "name": "asd"
  },
  {
    "address": {
      "country": "USA",
      "cityName": "San Diego",
      "areaName": "Black mountain",
      "houseNumber": "333/09"
    },
    "name": "Smith",
    "phoneNumbers": [
      {
        "cityCode": 858,
        "countryCode": 1,
        "uniqueNumber": 3220908
      },
      {
        "cityCode": 301,
        "countryCode": 1,
        "uniqueNumber": 8763456
      }
    ],
    "DOJ": "26/11/2018"
  },
  {
    "address": {
      "country": "India",
      "cityName": "Hubli",
      "areaName": "Akshay Park",
      "houseNumber": "264"
    },
    "name": "Pavitra",
    "phoneNumbers": [
      {
        "cityCode": 988,
        "countryCode": 91,
        "uniqueNumber": 2348761
      },
      {
        "cityCode": 858,
        "countryCode": 1,
        "uniqueNumber": 3408529
      }
    ],
    "DOJ": "26/11/2018"
  },
  {
    "name": "Pooja Y",
    "DOJ": "12/12/2018"
  }
]