CODEWITHSUNDEEP
jsonangularjs
texas697
texas697

Reputation: 6387

How to parse an Object

I have a Job object that contains JobTypeId, JobClassId,GeoAreaId. I can successfully send back one id to the apiController but when i try to parse all 3 of them I get a error:

Unexpected token o at Object.parse (native)

Angular Controller

 $scope.updateJob = function (job) {
    console.log($scope.currentItem);
    var jt = JSON.parse($scope.currentItem.JobType)
    var jc = JSON.parse($scope.currentItem.JobClass)
    var ga = JSON.parse($scope.currentItem.GeoArea)
    job.JobTypeId = jt.JobTypeId;
    job.JobClassId = jc.JobClassId;
    job.GeoAreaId = ga.GeoAreaId;
    jobFactory.updateJob(job).success(successCallback)
        .error(errorCallback);
    console.log(job); 
};
var successCallback = function (data, status, headers, config) {
    notificationFactory.success();
};
var errorCallback = function (job, status, headers, config) {
    notificationFactory.error(job.ExceptionMessage);
};

View

 <select ng-controller="JobMiscCtrl" style="width:148px" ng-model="currentItem.JobType">
   <option ng-repeat="job in jobTypeArray" title="{{job.JobTypeName}}" ng-selected=" {{job.JobTypeId == currentItem.JobTypeId}}" value="{{job}}">
     {{job.JobTypeName}}
   </option>
 </select>
 <select ng-controller="JobMiscCtrl" style="width:148px" ng-model="currentItem.JobClass">
    <option ng-repeat="job in jobClassArray" title="{{job.JobClassName}}" ng-selected="{{job.JobClassId == currentItem.JobClassId}}" value="{{job}}">
    {{job.JobClassName}}
    </option>
 </select>
 <select ng-controller="JobMiscCtrl" style="width:148px" ng-model="currentItem.GeoArea">
   <option ng-repeat="job in geoAreaArray" title="{{job.GeoAreaName}}" ng-selected="{{job.GeoAreaId == currentItem.GeoAreaId}}" value="{{job}}">
       {{job.GeoAreaName}}
   </option>
 </select>

 <input ng-controller="JobCtrl" style="margin-right: 20px; width: 70px; margin-top: 25px" type="submit" ng-click="updateJob(currentItem)" value="Submit" />

Updated I moved everything into 1 controller. The view is returning a string. the apiController is expecting the JobTypeId only. So that is why I am trying to parse the Id properties from the string. this is what i am looking at

{{currentItem.GeoArea.GeoAreaId}}
   <label style="margin-left:57px">Geo&nbsp;Area:</label>
   <select style="width:148px" ng-model="currentItem.GeoArea.GeoAreaId">
    <option ng-repeat="job in geoAreaArray" title="{{job.GeoAreaName}}" ng-selected="{{job.GeoAreaId == currentItem.GeoAreaId}}" value="{{job}}">
     {{job.GeoAreaName}}
    </option>
   </select>

when I select a new GeoArea, you see what shows up in the currentItem.GeoArea.GeoAreaId pic

Upvotes: 0

Views: 95

Answers (1)

Krishna Veeramachaneni
Krishna Veeramachaneni

Reputation: 2141

You don't have to specifically call JSON.Parse on the object. Its already in the format you need. You can just do this.

$scope.updateJob = function (job) {
    console.log($scope.currentItem);

    var jt = $scope.currentItem.JobType;
    var jc = $scope.currentItem.JobClass;
    var ga = $scope.currentItem.GeoArea;

    job.JobTypeId = jt.JobTypeId;
    job.JobClassId = jc.JobClassId;
    job.GeoAreaId = ga.GeoAreaId;
    jobFactory.updateJob(job).success(successCallback)
        .error(errorCallback);
    console.log(job); 
};

Or even shorter

$scope.updateJob = function (job) {
    console.log($scope.currentItem);
    job.JobTypeId = $scope.currentItem.JobType.JobTypeId;
    job.JobClassId = $scope.currentItem.JobClass.JobClassId;
    job.GeoAreaId = $scope.currentItem.GeoArea.GeoAreaId;
    jobFactory.updateJob(job).success(successCallback)
        .error(errorCallback);
    console.log(job); 
};

Update your UI to make it simpler

<div ng-controller="JobMiscCtrl">        
   <select ng-model="currentItem.JobType" ng-options="job.JobTypeName for job in jobTypeArray"></select>
   <br/>
   <select ng-model="currentItem.JobClass" ng-options="job.JobClassName for job in jobClassArray"></select>
   <br/>
   <select ng-model="currentItem.GeoArea" ng-options="job.GeoAreaName for job in geoAreaArray"></select>
   <input style="margin-right: 20px; width: 70px; margin-top: 25px" type="submit" ng-click="updateJob(currentItem)" value="Submit" />
</div>

Upvotes: 3

Related Questions