发表新帖
发表新帖

angularjs - ng-repeat: access key and value from JSON array object

后端 未结
关注
4 636
粉色の甜心
粉色の甜心 2020-12-04 13:14

I have JSON Array object as shown below.

$scope.items = 
    [
    {Name: \"Soap\",  Price: \"25\",  Quantity: \"10\"},
    {Name: \"Bag\",   Price: \"100\",
相关标签:
4条回答
  • 滥情空心
    2020-12-04 13:48

    You've got an array of objects, so you'll need to use ng-repeat twice, like: 

    <ul ng-repeat="item in items">
  <li ng-repeat="(key, val) in item">
    {{key}}: {{val}}
  </li>
</ul>

    Example: http://jsfiddle.net/Vwsej/

    Edit:

    Note that properties order in objects are not guaranteed.

    <table>
    <tr>
        <th ng-repeat="(key, val) in items[0]">{{key}}</th>
    </tr>
    <tr ng-repeat="item in items">
        <td ng-repeat="(key, val) in item">{{val}}</td>
    </tr>
</table>

    Example: http://jsfiddle.net/Vwsej/2/

    0 讨论(0)
  • 感动是毒
    2020-12-04 13:48

    try this..

    <tr ng-repeat='item in items'>
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
    0 讨论(0)
  • 無奈伤痛
    2020-12-04 14:05

    Solution I have json object which has data

    [{"name":"Ata","email":"test@test1.com"}]

    You can use following approach to iterate through ng-repeat and use table format instead of list.

    <div class="container" ng-controller="fetchdataCtrl">    
  <ul ng-repeat="item in numbers">
    <li>            
      {{item.name}}: {{item.email}}
    </li>
  </ul>     
</div>
    0 讨论(0)
  • 无人及你
    2020-12-04 14:07

    I have just started checking out Angular(so im quite sure there are other ways to get it done which are more optimum), and i came across this question while searching for examples of ng-repeat.

    The requirement by the poser(with the update):

    "...but my real requirement is display the items as shown below.."

    looked real-world enough (and simple), so i thought ill give it a spin and attempt to get the exact desired structure.

    angular.module('appTest', [])
  .controller("repeatCtrl", function($scope) {
    $scope.items = [{
      Name: "Soap",
      Price: "25",
      Quantity: "10"
    }, {
      Name: "Bag",
      Price: "100",
      Quantity: "15"
    }, {
      Name: "Pen",
      Price: "15",
      Quantity: "13"
    }];
  })
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="appTest">
  <section ng-controller="repeatCtrl">
    <table>
      <thead>
        <tr ng-repeat="item in items | limitTo:1">
          <th ng-repeat="(key, val) in item">
            {{key}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td ng-repeat="(key, val) in item">
            {{val}}
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</body>

    The limitTo:(n) filter is the key. Im still not sure if having multiple ng-repeat is an optimum way to go about it, but can't think of another alternative currently.

    0 讨论(0)
 看不清?
提交回复
热议问题