How to access JSON data with Angular

Question

My main Json object is a Job, attached to it are ChangeOrders,PurchaseOrders, JobItems, etc.... I cannot access the JobItems. I have setup a plunkr, but the problem with it is I do not know how to recreate the Json structure so it is actually working. The way the plunkr is setup is how I access the ChangeOrders, which allows me to all the objects in the Array :

typeahead="c.ChangeOrders[0].COName for c in jobArray

However when I use this for my JobItems I am only accessing the first JobItem in the Array. plunkr

<input class="form-control input-md" style="width:200px" type="text" ng-model="jobItem.JobItemName"
     typeahead="jobItem.JobItems[0].JobItemName for jobItem in jobArray | filter:$viewValue"
     typeahead-on-select="selectJobItem($item)" ng-enter="addRecord()" placeholder="Job Items">

JSON

Update

 //GET Jobs
$scope.jobArray = {};
JobGet.query().then(function (data) {
    $scope.jobArray = data;
}, function (reason) {
    errorMngrSvc.handleError(reason);
});
app.factory('JobGet', function ($http, $q) {
  return {
    query: function () {
        var deferred = $q.defer();
        $http({ method: 'get', url: '/api/apiJob' })
                .success(function (data) {
                    deferred.resolve(data);
                }).error(function (error) {
                    deferred.reject(error);
                });
        return deferred.promise;
      }
    }
 });

JSON

index.html:177 881 52
 jobController.js:173 Object {$id: "1", JobId: 2, JobNumber: 3244, JobName: "Job Alpha",     JobDescription: null…}$$hashKey: "00G"$id: "1"ChangeOrders: Array[0]Customer: "Twin  Peaks"CustomerEmployeeAccountant: nullCustomerEmployeeAdmin: nullCustomerEmployeePM: nullCustomerEmployeeSuperintendent: nullGeoArea: "GeoArea Bravo"JobAddress: nullJobBalanceDue:  nullJobBalanceToBill: nullJobBillingDate: nullJobBillingForm: nullJobCertPayroll: trueJobCity: nullJobClass: "JobClass Alpha"JobContractDate: "2014-08-02T00:00:00"JobCost: nullJobCounty: nullJobDescription: nullJobFaxNumber: 8325478866JobId: 2JobInsProgram: "RCIP"JobIsHidden: nullJobItems: Array[5]0: Object$id: "2"Job: nullJobId: 2JobItemAmount: nullJobItemBackOrder: nullJobItemDescription: "Alpha"JobItemId: 1JobItemIsHidden: nullJobItemMatSize: nullJobItemMultiplier: nullJobItemName: "Item Alpha"JobItemNotes: nullJobItemPrice: nullJobItemQuantity: nullJobItemSection: nullJobItemUOM: null__proto__: Object1: Object$id: "3"Job: nullJobId: 2JobItemAmount: nullJobItemBackOrder: nullJobItemDescription: "Bravo"JobItemId: 2JobItemIsHidden: nullJobItemMatSize: nullJobItemMultiplier: nullJobItemName: "Item Bravo"JobItemNotes: nullJobItemPrice: nullJobItemQuantity: nullJobItemSection: nullJobItemUOM: null__proto__: Object2: Object$id: "4"Job: nullJobId: 2JobItemAmount: nullJobItemBackOrder: nullJobItemDescription: "Charlie"JobItemId: 3JobItemIsHidden: nullJobItemMatSize: nullJobItemMultiplier: nullJobItemName: "Item Charlie"JobItemNotes: nullJobItemPrice: nullJobItemQuantity: nullJobItemSection: nullJobItemUOM: null__proto__: Object3: Object$id: "5"Job: nullJobId: 2JobItemAmount: nullJobItemBackOrder: nullJobItemDescription: "Delta"JobItemId: 4JobItemIsHidden: nullJobItemMatSize: nullJobItemMultiplier: nullJobItemName: "Item Delta"JobItemNotes: nullJobItemPrice: nullJobItemQuantity: nullJobItemSection: nullJobItemUOM: null__proto__: Object__defineGetter__: function __defineGetter__() { [native code] }__defineSetter__: function __defineSetter__() { [native code] }__lookupGetter__: function __lookupGetter__() { [native code] }__lookupSetter__: function __lookupSetter__() { [native code] }constructor: function Object() { [native code] }hasOwnProperty: function hasOwnProperty() { [native code] }isPrototypeOf: function isPrototypeOf() { [native code] }propertyIsEnumerable: function propertyIsEnumerable() { [native code] }toLocaleString: function toLocaleString() { [native code] }toString: function toString() { [native code] }valueOf: function valueOf() { [native code] }get __proto__: function __proto__() { [native code] }set __proto__: function __proto__() { [native code] }4: Object$id: "6"Job: nullJobId: 2JobItemAmount: nullJobItemBackOrder: nullJobItemDescription: "Echo"JobItemId: 5JobItemIsHidden: nullJobItemMatSize: nullJobItemMultiplier: nullJobItemName: "Item Echo"JobItemNotes: nullJobItemPrice: nullJobItemQuantity: nullJobItemSection: nullJobItemUOM: null__proto__: Objectlength: 5__proto__: Array[0]JobMinWage: nullJobMoreShit: nullJobName: "Job Alpha"JobNumber: 3244JobOriginalBudget: 29706734.15JobOriginalContract: 34343443JobPaidToDate: nullJobPercentage: nullJobPhoneNumber: 7135698855JobProfit: nullJobRemainingBudget: nullJobRetainage: 10JobRevisedContract: 34949099JobState: nullJobStatus: "Active"JobTESPM: nullJobTESSuperintendent: nullJobTaxExempt: trueJobTotalBilled: nullJobTotalCO: 605656JobType: "JobType Alpha"JobZipcode: nullPurchaseOrders: Array[0]__proto__: Object

can you provide the code for your controller, specifically how jobArray is populated and declared? — Sebastian Piu
– Sebastian Piu, Commented Oct 27, 2014 at 14:10
Your syntax should be like: typeahead="item as item.name for item in items | filter:$viewValue" — Coldstar
– Coldstar, Commented Oct 28, 2014 at 8:24
typeahead="item as item.JobItemName for item in jobArray | filter:$viewValue" — texas697
– texas697, Commented Oct 28, 2014 at 12:39

dmahapatro · Accepted Answer · 2014-10-31 01:27:22Z

1

+50

Something like this is what are you looking for?

Highlights of the modifications (as far as I understand the question) is :

// Accumulate all JonItems in one array which will be used in typeahead
angular.forEach($scope.jobArray, function(job){
    angular.forEach(job.JobItems, function(item){
        $scope.allJobItems.push(item);
    });
});

Also note the changes for the typeahead:

typeahead="itemName as item.JobItemName for item in allJobItems | filter:$viewValue"

Same principle would be applicable for ChangeOrders and PurchaseOrders. Also note more JobItems are added to each item, so that typeahead will be applicable to all of them.

I hope things would be clear with this answer but if this is still unclear then modify the plunker and add ChangeOrders and PurchaseOrders and let me know if you are stuck.

answered Oct 31, 2014 at 1:27

dmahapatro

50.4k7 gold badges94 silver badges122 bronze badges

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

3 Comments

texas697 Over a year ago

getting a error message in the console when i type something in the input field. Im trying to figure out why.. TypeError: Cannot read property 'length' of undefined at ui-bootstrap-tpls.js:3602 at wrappedCallback (angular.js:11573) at wrappedCallback (angular.js:11573) at angular.js:11659 at Scope.$eval (angular.js:12702) at Scope.$digest (angular.js:12514) at Scope.$apply (angular.js:12806) at HTMLInputElement.listener (angular.js:17057) at HTMLInputElement.n.event.dispatch (jquery.js:4409) at HTMLInputElement.r.handle (jquery.js:4095)

dmahapatro Over a year ago

Show me a plunker with the error. I am sure it is not coming from the plunker I have in the answer.

texas697 Over a year ago

Its on my computer. Im an going to see what is going on.

Collectives™ on Stack Overflow

How to access JSON data with Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related