CODEWITHSUNDEEP
angularjsjsonhtml-table
noitse
noitse

Reputation: 1045

Angular js json access value name

I am trying to make auto generating table from json with angularJS , but how do i access name of value its self , for example this is json i get

    {"data":{"selectView":[{"employeeCode":"1","employeeFirstName":"name","employeeLastName":"lastName"},
{"employeeCode":"2","employeeFirstName":"name1","employeeLastName":"lastName1"}]}}

I have sent that trough main.js to my controller , in which i have done this $scope.employee = employee.data.selectView;

And i am using ng-repeat="employee in employee"

It is object json , what am i doing wrong ?

How can i return value "employeeCode" or "employeeFirstName" , i have tryed (key,value) in employee on ng-repeat , but it returns whole row ({"employeeCode":"1","employeeFirstName":"name","employeeLastName":"lastName"})

Any ideas ?

EDIT UPDATE

Solution was <th ng-repeat="(key, val) in employee[0]">{{key}}</th>

Upvotes: 0

Views: 147

Answers (4)

noitse
noitse

Reputation: 1045

Solution was <th ng-repeat="(key, val) in employee[0]">{{key}}</th>

for td's i used 

     <tr ng-repeat="dataItem in data" ng-click="newLocation(data[$index])">

       <td ng-repeat="(key, val) in dataItem">{{val}}</td>
   </tr>

Upvotes: 2

ashfaq.p
ashfaq.p

Reputation: 5479

Since the JSON you are getting is an array and not an object, so you should not use (key, value). You should use ng-repeat directly on your array. In your controller, assign it to a variable like this:

$scope.myjson = {"data":{"selectView": [{"employeeCode":"1","employeeFirstName":"name","employeeLastName":"lastName"},
{"employeeCode":"2","employeeFirstName":"name1","employeeLastName":"lastName1"}]   }}

then in your html,

<div ng-controller="MyCtrl">
 <table>
  <tr ng-repeat="emp in myjson.data.selectView">
    <td>{{emp.employeeCode}}</td>
    <td>{{emp.employeeDirstName}}</td>
    <td>{{emp.employeeLastName}}</td>
  </tr>
</table>

Upvotes: 0

Amulya Kashyap
Amulya Kashyap

Reputation: 2373

In Your Controller/Module File (.Js File)

$scope.data = [
{
employeeCode":"1","employeeFirstName":"name","employeeLastName":"lastName"
},
{
"employeeCode":"2","employeeFirstName":"name1","employeeLastName":"lastName1"
}];

In Your HTML File

<ul ng-repeat = "values in data">
<li>{{values.employeeCode}}</li>
<li>{{values.employeeFirstName}}</li>
<li>{{values.employeeLastName}}</li>
</ul>

Cheers :)

Upvotes: 0

Rishabh Jain
Rishabh Jain

Reputation: 536

Create a simple Html table and apply ng-repeat on the 

<table>
    <tr ng-repeat="employee in employees">
      <td>{{employee.employeeCode}}</td>
      <td>{{employee.employeeFirstName}}</td>
      <td>{{employee.employeeLastName}}</td>
    </tr>
  </table>

in the app.js assign the json array to $scope.employees

Upvotes: 1

Related Questions