如何使用Angular访问JSON数据

时间:2014-10-27 12:05:15

标签: json angularjs

我的主要Json对象是一个Job,附加到它是ChangeOrders,PurchaseOrders,JobItems等....我无法访问JobItems。我已经设置了一个plunkr,但问题是我不知道如何重新创建Json结构,所以它实际上正在工作。设置plunkr的方式是我如何访问ChangeOrders,它允许我访问数组中的所有对象:

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

但是当我将它用于我的JobItems时,我只访问Array中的第一个JobItem。 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

更新

 //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

1 个答案:

答案 0 :(得分:1)

this之类的东西是你在寻找什么?

修改的重点(据我理解的问题)是:

// 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);
    });
});

还要注意输入的更改:

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

同样的原则适用于ChangeOrders和PurchaseOrders。另请注意,每个项目都会添加更多JobItems,因此预先输入将适用于所有项目。

我希望这个答案会很明确,但是如果仍然不清楚那么修改plunker并添加ChangeOrders和PurchaseOrders并让我知道你是否被卡住了。