CODEWITHSUNDEEP
htmlangularjs
user3641381
user3641381

Reputation: 1076

Populating html table field by given values

So here is what I am looking for.

I have a response from the server. And the json looks like this.

    [
  {
    "id": 2,
    "serial_number": 9011,
    "description": null,
    "number_of_plates": 0,
    "data_directory_id": null,
    "mandrel_id": 53,
    "geometry_id": 3,
    "robot_id": null,
    "stack_type_id": 4,
    "project_id": 1,
    "equipment_status_code_id": 17,
    "process_id": null,
    "dies_id": 2,
    "storage_location_id": null,
    "xray_measurement_id": null,
    "metrology_data_file_id": null,
    "data_representation_id": null,
    "created_by": null,
    "created_at": "2017-01-04 15:22:57",
    "updated_at": "2017-01-04 15:33:20",
    "updated_by": 1,
    "xou_id": null,
    "plates": [
      {
        "id": 51,
        "serial_number": "1234",
        "crc_code": "2",
        "reason": "this is a test",
        "supplier_id": 5001,
        "equipment_status_code_id": 1,
        "plate_type_id": null,
        "coating_id": null,
        "metrology_data_file_id": null,
        "project_id": 8,
        "plate_container_id": null,
        "container_slot_id": null,
        "orientation_id": 21,
        "plate_quality_id": 51,
        "wafer_id": 51,
        "data_representation_id": null,
        "xray_measurement_id": null,
        "process_id": 51,
        "created_by": null,
        "created_at": "2016-12-30 11:45:29",
        "updated_at": "2017-01-09 09:32:22",
        "updated_by": 1,
        "pivot": {
          "stack_id": 2,
          "plate_id": 51,
          "created_at": "2017-01-09 09:32:22",
          "updated_at": "2017-01-09 09:32:22",
          "position": 1
        }
      },
      {
        "id": 52,
        "serial_number": "2214",
        "crc_code": "2",
        "reason": null,
        "supplier_id": 5002,
        "equipment_status_code_id": 1,
        "plate_type_id": null,
        "coating_id": null,
        "metrology_data_file_id": null,
        "project_id": null,
        "plate_container_id": null,
        "container_slot_id": null,
        "orientation_id": 17,
        "plate_quality_id": 51,
        "wafer_id": 51,
        "data_representation_id": null,
        "xray_measurement_id": null,
        "process_id": 51,
        "created_by": null,
        "created_at": "2016-12-30 11:45:29",
        "updated_at": "2017-01-09 09:32:35",
        "updated_by": 1,
        "pivot": {
          "stack_id": 2,
          "plate_id": 52,
          "created_at": "2017-01-09 09:32:35",
          "updated_at": "2017-01-09 09:32:35",
          "position": 1
        }
      }
    ]
  }
]

All I am trying to achieve is to have something in a table like this.

 ---------------------------------
| Stack | Plate        | Position |             
----------------------------------
| 9011  |  1234        |     1
----------------------------------
| 9011  |  2214        |     1
----------------------------------

In html this is what I have now.

<tbody ng-repeat="item in responseFromServer ">
    <tr>
        <td>{{item.serial_number}}</td>
        <td>
            <span ng-repeat="plate in item.plates">
                {{plate.serial_number}}
                <span ng-if="!$last">,</span>
            </span>
        </td>

        <td>
            <span ng-repeat="p in item.plates">
                <div ng-if="p.pivot.position === null">
                    <span class="badge badge-black">Not set</span>
                </div>
                {{p.pivot.position}}
                <span ng-if="!$last">,</span>
            </span>
        </td>
    </tr>

</tbody>

enter image description here But this is not what I am seeking.

Thanks for your time!

Upvotes: 0

Views: 46

Answers (2)

Naghaveer R
Naghaveer R

Reputation: 2944

Try this!!!

Put ng-repeat inside <tr>

<tbody ng-repeat="item in responseFromServer ">
      <tr ng-repeat="plate in item.plates">
        <td>{{item.serial_number}}</td>
        <td>
          <span>
           {{plate.serial_number}}
      </span>
        </td>


var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.responseFromServer = [{
    "id": 2,
    "serial_number": 9011,
    "description": null,
    "number_of_plates": 0,
    "data_directory_id": null,
    "mandrel_id": 53,
    "geometry_id": 3,
    "robot_id": null,
    "stack_type_id": 4,
    "project_id": 1,
    "equipment_status_code_id": 17,
    "process_id": null,
    "dies_id": 2,
    "storage_location_id": null,
    "xray_measurement_id": null,
    "metrology_data_file_id": null,
    "data_representation_id": null,
    "created_by": null,
    "created_at": "2017-01-04 15:22:57",
    "updated_at": "2017-01-04 15:33:20",
    "updated_by": 1,
    "xou_id": null,
    "plates": [{
      "id": 51,
      "serial_number": "1234",
      "crc_code": "2",
      "reason": "this is a test",
      "supplier_id": 5001,
      "equipment_status_code_id": 1,
      "plate_type_id": null,
      "coating_id": null,
      "metrology_data_file_id": null,
      "project_id": 8,
      "plate_container_id": null,
      "container_slot_id": null,
      "orientation_id": 21,
      "plate_quality_id": 51,
      "wafer_id": 51,
      "data_representation_id": null,
      "xray_measurement_id": null,
      "process_id": 51,
      "created_by": null,
      "created_at": "2016-12-30 11:45:29",
      "updated_at": "2017-01-09 09:32:22",
      "updated_by": 1,
      "pivot": {
        "stack_id": 2,
        "plate_id": 51,
        "created_at": "2017-01-09 09:32:22",
        "updated_at": "2017-01-09 09:32:22",
        "position": 1
      }
    }, {
      "id": 52,
      "serial_number": "2214",
      "crc_code": "2",
      "reason": null,
      "supplier_id": 5002,
      "equipment_status_code_id": 1,
      "plate_type_id": null,
      "coating_id": null,
      "metrology_data_file_id": null,
      "project_id": null,
      "plate_container_id": null,
      "container_slot_id": null,
      "orientation_id": 17,
      "plate_quality_id": 51,
      "wafer_id": 51,
      "data_representation_id": null,
      "xray_measurement_id": null,
      "process_id": 51,
      "created_by": null,
      "created_at": "2016-12-30 11:45:29",
      "updated_at": "2017-01-09 09:32:35",
      "updated_by": 1,
      "pivot": {
        "stack_id": 2,
        "plate_id": 52,
        "created_at": "2017-01-09 09:32:35",
        "updated_at": "2017-01-09 09:32:35",
        "position": 1
      }
    }]
  }];
});
table, th, td {
   border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <tbody ng-repeat="item in responseFromServer ">
      <tr ng-repeat="plate in item.plates">
        <td>{{item.serial_number}}</td>
        <td>
          <span>
           {{plate.serial_number}}
      </span>
        </td>

        <td>
          <span ng-repeat="p in item.plates">
                        <div ng-if="p.pivot.position === null">
                            <span class="badge badge-black">Not set</span>
</div>
{{p.pivot.position}}
<span ng-if="!$last">,</span>
</span>
</td>
</tr>
</tbody>
</table>
<div ng-app="app" ng-controller="ctrl">

Upvotes: 1

Georg Edelmann
Georg Edelmann

Reputation: 54

Did you use angular.fromJson to migrate the json? See here: https://docs.angularjs.org/api/ng/function/angular.fromJson

Upvotes: 0

Related Questions