Show json array list in table row angular

Question

I am trying to show JSON array data in table row. But I am doing it wrong through ng-repeat. I have a text input field with read only feature inside the table row. I have to show inside the text input field.

JSON data :

$scope.list=[
{
    "ID": "1",
    "Source": [
        "AA",
        "AVV",
        "WEB",
        "DEB"
    ]
}
]

My View:-

<tbody>
<tr role="row" class="">
        <td class="sorting_1" ng-repeat="row in list.Source">
        <input readonly="readonly" id="reg_input" class="form-control" type="text"/>
        </td>
</tr>
</tbody>

My table header is fixed So I haven't included that.

EDIT:- Updated View

<table id="datatable_demo" class="table>
    <thead>
        <tr role="row">
            <th class="text-center">Source</th>
            <th class="text-center">Target</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="" ng-repeat="ff in setup_list">
            <td class="sorting_1" ng-repeat="data in ff.SourcePortGroups track by $index">
                <input readonly="readonly" id="reg_input" ng-model="data" class="form-control" type="text"/>
            </td>
            <td>
            <select id="reg_select" class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
            </td>
        </tr>
    </tbody>
</table>

instead of list.Source you need list[0].Source, since list is an array (without a reason) — Aleksey Solovey
– Aleksey Solovey, Commented May 15, 2018 at 11:01
@AlekseySolovey ya but that is not solving anyways multiple value without data is being generated in a row. I need values in columns under particular header. And the info must be inside <input> — WhoAmI
– WhoAmI, Commented May 15, 2018 at 11:07
if you have multiple sets of Source then you have to use another ng-repeat inside ng-repeat. — Vipul Solanki
– Vipul Solanki, Commented May 15, 2018 at 11:10
@VipulSolanki I have only one key of Source and values that I had mentioned in my question. — WhoAmI
– WhoAmI, Commented May 15, 2018 at 11:20
then you have to put value="row" in your input only, that's it. — Vipul Solanki
– Vipul Solanki, Commented May 15, 2018 at 12:20

Aleksey Solovey · Accepted Answer · 2018-05-15 11:23:48Z

1

If your array list has multiple arrays within it, then you need an additional ng-repeat. Wrap it in <div> or something so the inner array will fit in a single row (from the first ng-repeat). Here is a demo:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.list = [{
      "ID": "1",
      "Source": [
        "AA",
        "AVV",
        "WEB",
        "DEB"
      ]
    },
    {
      "ID": "2",
      "Source": [
        "BB",
        "BWW",
        "BEW",
        "BED"
      ]
    }
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

  <table class="table">
    <tr ng-repeat="row in list">
      <td>
        <div ng-repeat="data in row.Source">
          <input readonly="readonly" ng-model="data" type="text" />
        </div>
      </td>
    </tr>
  </table>

</div>

answered May 15, 2018 at 11:23

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

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

3 Comments

WhoAmI Over a year ago

Your output is correct but in my result within a row the data is in repeat instead in a single column.

WhoAmI Over a year ago

Source is not getting repeated. Only the values inside it. Source is only one key in the JSON

WhoAmI Over a year ago

Ok I got it , forgot to place ng-repeat in <div> . Thanks.

Collectives™ on Stack Overflow

Show json array list in table row angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related