Show json object in a input field-angularjs

Question

I am getting a form data from json.I have binded all data into a form fields, but Resource field data coming as separate object and I want to show it as comma separated.
I tried this,But its showing two resouce fields. How to do it?

Here is my code

<form ng-repeat="data in editProjDetails">
                    <div>
                        <label class="displayBlock">Project Name</label>
                        <label><input type="text" ng-model="data.ProjectName" ng-disabled="all"></label>
                    </div>
                    <div>
                        <label class="displayBlock">Client</label>
                        <label><input type="text" ng-model="data.Client" ng-disabled="all"></label>
                    </div>
                    <div id="projectCoOrdBlock">
                        <label class="displayBlock">Project Co-ordinator</label>
                        <label><input type="text" ng-model="data.ProjectCoordinator" ng-disabled="true"></label>
                    </div>
                    <div id="resourceBlock">
                        <label class="displayBlock">Resource</label>
                        <label><input type="text"  ng-repeat="x in data.ResourceAllocated"  ng-model="x.ResourceName"  ng-disabled="true"></label>
                    </div>                  
</form>

I did this in jquery.This is what I am trying to implement in angular

 rAllo = data.ResourceAllocated;
        if (rAllo.length == 0) {
            $("#resource").val("No resources available");
        }
        else {
            for (var i = 0; i < rAllo.length; i++) {
                var arrayDatas = rAllo[i].ResourceName;
                resource.push(arrayDatas)
            }
            $("#resource").val(resource)
        }

Rohan Kawade · Accepted Answer · 2017-06-26 06:26:31Z

1

$scope.resourceAllocated= $scope.data.ResourceAllocated.map(function(el){return el.name}).join(",");

 <input type="text" ng-model="resourceAllocated">

Try using this

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input type="text" ng-model="resourceAllocated">
		
</div>

</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.yearbtn = [
        {year:'2022'},
        {year:'2021'},
        {year:'2019'},
        {year:'2018'},
        {year:'2017'},
        {year:'2016'},
        {year:'2015'},
 ];
 
 $scope.resourceAllocated= $scope.yearbtn.map(function(el){return el.year}).join(",");

});
</script>
</html>

Working Demo

edited Jun 26, 2017 at 6:26

answered Jun 26, 2017 at 6:20

Rohan Kawade

4735 silver badges18 bronze badges

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

4 Comments

user7397787 Over a year ago

it returns this error Cannot read property 'ResourceAllocated' of undefined

Rohan Kawade Over a year ago

check whether you are getting data inside $scope.data.ResourceAllocated or provide a plunker

Rohan Kawade Over a year ago

console log your $scope.data.ResourceAllocated and check whether data is present and do not write resource allocated input field inside ng-repeat in HTML

user7397787 Over a year ago

why we are passing el here?

Sajeetharan · Accepted Answer · 2017-06-26 06:39:08Z

1

Try it like this,

<div id="resourceBlock"  ng-repeat="x in data.ResourceAllocated">
     <label class="displayBlock">Resource</label>
     <label><input type="text"   ng-model="x.ResourceName"  ng-disabled="true"></label>
</div>

DEMO

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) { 
$scope.data =[{"Id":1010,"ProjectName":"aaa","Client":"aaa","ProjectCoordinator":["RajkumarS‌"],"OnsiteCoordinator":"aaa","ResourceAllocated":[{"ResourceName":"RajkumarS","Re‌sourceId":9,"RoleName":"Manager"},{"ResourceName":"aSd","ResourceId":1012,"RoleNa‌me":"tester"}],"ProjectRoles":null}];
 $scope.resourceAllocated= $scope.data[0].ResourceAllocated.map(function(el){return el.ResourceName}).join(",");

});

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>

<body ng-controller="myCtrl">     
 
     <label class="displayBlock">Resource</label>
     <label><input type="text"   ng-model="resourceAllocated" ></label>
 
 <script src="https://code.angularjs.org/1.6.1/angular.js"></script>
 </body>
</html>

edited Jun 26, 2017 at 6:39

answered Jun 26, 2017 at 6:06

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

5 Comments

Sajeetharan Over a year ago

you mean 3 inputs?

user7397787 Over a year ago

yes.I have two resources in my json.so its showing two resources in two input fields.

Sajeetharan Over a year ago

thats what ng-repeat does, what else you expect?

user7397787 Over a year ago

I want to show all my resourceName in a single input field with comma separated.

Sajeetharan Over a year ago

check the demo above

Collectives™ on Stack Overflow

Show json object in a input field-angularjs

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related