How can I fetch data from different tables database using angularjs?

Question

I am working on a web application using ASP.NET MVC 4 and I want to fetch data from database using AngularJS.

My issue is that I have two tables (products, category) like below:

public partial class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string imgurl { get; set; }
    public int CategoryId { get; set; }

    public virtual Category Category { get; set; }
}

public partial class Category
{
    public Category()
    {
        this.Products = new HashSet<Product>();
    }

    public int Id { get; set; }
    public string Name { get; set; }

    public virtual ICollection<Product> Products { get; set; }
}

I want to iterate data using ng-repeat from product table like this :

Name   category
================
iphone  -  Mobiles

Only, I can retrieve data like :

Name   category Id
================
iphone  -  1

I can’t retrieve category name from category table. but I can retrieve categoryId.

Is there any way to get data from database in this format using ng-repeat .

 Name   category
  ================
 iphone  -  Mobiles

I want to get data from two tables already between them relationship .

Thanks in advance.

Answer 1

Please try as shown below (using Eager Loading)

public JsonResult getAllProducts() 
 { 
      var products = db.Products
                     .Include(p => p.Category)
                     .ToList();

      return Json(products , JsonRequestBehavior.AllowGet); 
 }

Update : You cannot retrieve collection of objects through the get method.You have to use post with the object collection as shown below.This is just a sample.Hope you can get the idea.

 public async Task<RefereeEditDto> GetRefereeForEditAsync(NullableIdInput<int> input)
        {
            var referee = await _refereeRepository.FirstOrDefaultAsync(p => p.Id == input.Id);
            var result = referee.MapTo<RefereeEditDto>();
            return result;
        }

Answer 2

Finally , i found the solution of my issue ... as follows:

query to join between two tables :

 public JsonResult getAllProducts() 
    {
        var products = from pr in db.Products
                       join ct in db.Categories
                       on pr.CategoryId equals ct.Id
                       select new
                       {
                           pr.Name,
                           pr.CategoryId,
                          CatName= ct.Name
                       };
            return Json(products , JsonRequestBehavior.AllowGet); 

                    }

after that , using ng-repeat to iterate data :

<tr ng-repeat="product in products" >
                <td>{{product.Name}}</td>
                <td>{{product.CatName}}</td>
                <td>{{product.CategoryId}}</td></tr>

Now , every things working fine and i can fetch data in which format i want... thanks to every one trying to help me.