AngularJs array inside of array display in textarea

Question

I have this kind of data

$scope.data = [{
  "production_list": [
    {"product": "google\n"},
    {"product": "stackoverflow\n"},
    {"product": "angular\n"}
   ]
}]

How can I display it in textarea like this?

<textarea>
  google
  stackoverflow
  angular
</textarea>

What I tried is

<tr ng-repeat="list in data">
  <td>
    <textarea ng-repeat="x in data.production_list">
       {{x.product}}
    </textarea>
  </td>
</tr>

The output is

<textarea>
  google
</textarea>
<textarea>
  stackoverflow
</textarea>
<textarea>
  angular
</textarea>

And is this a possible to have an increment? Because instead of ng-repeat its better to make it like this

<textarea value="data.production_list[$index].product">
</textarea>

however $index is not working its value is 0

Mean do you want to change the values inside controller also if you made any change in textarea or you want to simple display them in textarea? — jitender
– jitender, Commented Nov 8, 2017 at 4:38

MrNobody007 · Accepted Answer · 2017-11-08 04:59:13Z

Instead of writing it as a scope function you can make use of filter so that you can easily re-use code across module.

var app = angular.module('myApp', []);
app.filter('joinAttrs', function() {
    return function(list, attrName) {
        var joinedStr = "";
        for(var i=0; i<list.length; i++){
          joinedStr += list[i][attrName];
        }
        return joinedStr;
    };
});
app.controller('DemoCtrl', function($scope) {
    $scope.data = [{
      "production_list": [
        {"product": "google\n"},
        {"product": "stackoverflow\n"},
        {"product": "angular\n"}
       ]
    }]
});

textarea {
  height: 100px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="DemoCtrl">
  <div ng-repeat="list in data">
    <textarea>{{list.production_list | joinAttrs:'product'}}</textarea>
  </div>
</div>

justin · Accepted Answer · 2017-11-08 04:36:15Z

1

You could create a function that joins the data from the array first, then use that as your ng-model.

In your controller:

 $scope.textareaData = data[0].production_list
  .map(function(item) {
    return item.product;
  })
  .join('');

Then your textarea would be:

<textarea ng-model="textareaData"></textarea>

This will output each product inside your textarea.

answered Nov 8, 2017 at 4:36

justin

4392 silver badges10 bronze badges

4 Comments

jitender Over a year ago

what would happen if there are multiple object inside data?

justin Over a year ago

I guess it would depend on their data structure. Right now, it is just an object wrapped in an array, so we the production_list is at position 0.

jitender Over a year ago

yup it should just wanted to suggest you to give a flexible answer

justin Over a year ago

Thanks, appreciate the tip!

jitender · Accepted Answer · 2017-11-08 04:41:22Z

Create an function inside your controller and use it in text area something like

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.data = [{
  "production_list": [
    {"product": "google\n"},
    {"product": "stackoverflow\n"},
    {"product": "angular\n"}
   ]
}]
$scope.textAreaValues = function(data){
  var retVal=  data.reduce(function(a,b){
  return {product: a.product + b.product};
  });
  return retVal.product;
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="list in data">
  <td>
    <textarea>
     {{textAreaValues(list.production_list)}}
    </textarea>
  </td>
</tr>
</table>
</div>

Collectives™ on Stack Overflow

AngularJs array inside of array display in textarea

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related