CODEWITHSUNDEEP
jsonangularjs
texas697
texas697

Reputation: 6417

How to access JSON data with Angular

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

Upvotes: 1

Views: 349

Answers (1)

dmahapatro
dmahapatro

Reputation: 50275

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.

Upvotes: 1

Related Questions