Currently, I am in the process of developing a web application using AngularJS and TypeScript with a Netbeans RESTful backend. I have created a TypeScript interface for a vendor which looks like this:
interface Vendor {
vendorno: number,
name: string,
address1: string,
city: string,
province: string,
postalcode: string,
phone: string,
vendortype: string,
email: string;
}
However, when I retrieve all vendor data from my JavaDB through the REST service, the JSON returned has properties named differently than what is defined in my interface. This causes issues with my angular directives as I need to refer to the JSON naming scheme instead:
[{"vendorAddress":"543 Sycamore Ave","vendorCity":"Toronto","vendorEmail":"emailplaceholder","vendorName":"Big Bills Depot","vendorNo":1,"vendorPhone":"(999) 555-5555","vendorPostalcode":"N1P1N5","vendorProvince":"ON","vendorType":"Trusted"},
{"vendorAddress":"628 Richmond Street","vendorCity":"London","vendorEmail":"emailplaceholder","vendorName":"ABC Supply Co.","vendorNo":2,"vendorPhone":"(519) 123-4567","vendorPostalcode":"N6C1L7","vendorProvince":"ON","vendorType":"Trusted"},
{"vendorAddress":"123 Main Boulevard","vendorCity":"Burlington","vendorEmail":"emailplaceholder","vendorName":"Gadget Shack","vendorNo":3,"vendorPhone":"(613) 444-3423","vendorPostalcode":"N3X5S2","vendorProvince":"ON","vendorType":"Unknown"}]
To display this vendor information in a table within my partial, I must use the following angular bindings:
<div class="col-lg-1 col-sm-1 col-xs-1 text-left">{{vend.vendorNo}}</div>
<div class="col-lg-4 col-sm-4 col-xs-4 text-center">{{vend.vendorName}}</div>
<div class="col-lg-3 col-sm-3 col-xs-3 text-center">{{vend.vendorCity}}</div>
<div class="col-lg-3 col-sm-3 col-xs-3 text-center">{{vend.vendorType}}</div>
I'm wondering why either AngularJS or my Java REST service is automatically renaming the returned JSON property names?