Multi query in AngularJS

Question

I need to develop a page with AngularJS.

I have two tables.

Table 1 : StateList  

StateCode   | StateName
-------------------------------
AZ          |  ARIZONA      
CA          |  CALIFORNIA
NY          |  NEW YORK

Table 2: CustomerDetail
Name    |  BornState  | LivingState
-----------------------------------------
Peter   |  AZ         | NY
Bob     |  CA         | AZ

Want to display list like this on HTML Page.

Customer Name   | Customer BornState    | Customer LivingState
------------------------------------------------------------------------
Peter           | ARIZONA               | New York
Bob             | CALIFORNIA            | ARIZONA

Instead of state code, I want to display State Name for each type of state information, e.g BornState and LivingState. I am able to fetch list from Table 2:CustomerDetail but how I can convert state code with state name for each type of state information?

Thanks in advance

Adding more Details

I have $stateProvider as below

.state("customerDetail",{
                        url:"/customer/detail/:customerId",
                        templateUrl:"app/customer/customerDetail.html",
                        controller: "DetailCtrl as vm",
                        resolve: {
                            customer: function (Restangular, $stateParams) {
                                return Restangular.one('customer', $stateParams.customerId).get();
                            }
                        }
                    })

This give me array like

{"customerId":"1","customerName":"Bob","BornState":"CA","LivingState":"AZ"}

my state array list is like

 [{"Code":"NY","Name":"New York"},{"Code":"AZ","Name":"ARIZONA"},{"Code":"CA","Name":"CALIFORNIA"}]

I want to display full state name instead of state code

you may want to share some code for people to take a look.

Jax
– Jax

2015-12-14 14:01:12 +00:00
Commented Dec 14, 2015 at 14:01 — Jax
– Jax, Commented Dec 14, 2015 at 14:01
Added in above description. Thanks for your help

fresher
– fresher

2015-12-14 14:12:22 +00:00
Commented Dec 14, 2015 at 14:12 — fresher
– fresher, Commented Dec 14, 2015 at 14:12

AlainIb · Accepted Answer · 2015-12-14 19:59:15Z

2

this is a plunkr

// EDITED http://plnkr.co/edit/s1XtDHA3ancyP3ceTxeX?p=preview

In your scope :

 $scope.StateList  = {} ;
 //init the $scope.StateList  
 var statList = [{"Code":"NY","Name":"New York"}, {"Code":"AZ","Name":"ARIZONA"},{"Code":"CA","Name":"CALIFORNIA"}];
 for(var i in statList){
   $scope.StateList[statList[i]["Code"]] = statList[i]["Name"];
 }

 $scope.CustomerDetail = [{
    "CustomerName" : "Peter",
    "CustomerBornState" :"AZ",
    "CustomerLivingState" : "NY"
 },{
    "CustomerName" : "Peter",
    "CustomerBornState" :"CA",
    "CustomerLivingState" : "AZ"
 }];

and the html :

 <table>
 <tr ng-repeat="customer in CustomerDetail">

   <td>
     {{customer.CustomerName}}
   </td>
   <td>
      {{StateList[customer.CustomerBornState]}}
   </td>
   <td>
     {{StateList[customer.CustomerLivingState]}}
   </td>
 </tr>

also you can do it with a cleaner way. In the controller , after you get the data from customerDetail stateProvider, add a field in the $scope.CustomerDetail with the real city name and just display it in the view.

edited Dec 14, 2015 at 19:59

answered Dec 14, 2015 at 14:15

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

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

2 Comments

AlainIb Over a year ago

Tell me if don't work. if it work you can accept this answer .

fresher Over a year ago

its not working my statList is like [{"Code":"NY","Name":"New York"},{"Code":"AZ","Name":"ARIZONA"},{"Code":"CA","Name":"CALIFORNIA"}]

Amit · Accepted Answer · 2015-12-14 14:14:15Z

0

You should really use SQL for this, and JOIN the two tables, but if you want an angular solution, this is it:

In your controller:

$scope.cus = [array of customers];
var countries = [array of countries];
$scope.countries = {};
$.each(countries, function(k,v) {
  $scope.countries[v.StateCode] = v.StateName;
});

And your HTML table:

<tr ng-repeat="row in cus">
  <td>{{row.name}}</td>
  <td>{{countries[row.BornState]}}</td>
  <td>{{countries[row.LivingState]}}</td>
</tr>

All ive done is create a new object to act as a hashtable, in which the fetching takes O(1).

answered Dec 14, 2015 at 14:14

Amit

6,3647 gold badges54 silver badges110 bronze badges

Comments

jKlaus · Accepted Answer · 2015-12-14 20:05:18Z

0

I would suggest getting familiar with LinqJS.. I've been moving more and more of my application specific model interactions / augmentations to the client.

This could be done very quickly and painlessly with a Join statement.

answered Dec 14, 2015 at 20:05

jKlaus

3803 silver badges8 bronze badges

Collectives™ on Stack Overflow

Multi query in AngularJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related