与JSON的HTML表

Question

我有一个不同的JSON格式，我需要把它与HTML表并显示它。我需要在AngularJS中做到这一点。我尝试了正常的JSON格式，它工作正常，但对于这个JSON它不工作。这个例子是为了索引搜索，所以我需要像这样维护JSON。

例如：

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 

      </tr> 
     </thead> 
<tbody> 
<tr ng-repeat="x in names"> 
     <td>{{x.Name}}</td> 
     <td>{{x.City}}</td> 
     <td>{{x.Country}}</td> 
     </tr> 
</tbody> 
    </table> 
    <script> 
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope) { 
    $scope.names =[ 
    { 
    "Name" : "Max Joe", 
    "City" : "Lulea", 
    "Country" : "Sweden" 
    }, 
    { 
    "Name" : "Manish", 
    "City" : "Delhi", 
    "Country" : "India" 
    }, 
    { 
    "Name" : "Koniglich", 
    "City" : "Barcelona", 
    "Country" : "Spain" 
    }, 
    { 
    "Name" : "Wolski", 
    "City" : "Arhus", 
    "Country" : "Denmark" 
    } 
];  
}); 
</script> 
    </div> 

现在我需要做同样的事情有以下JSON格式：

{ 
    "data": [ 
      [ 
       "1", 
       "supply chain Management", 
       "https://www.google.co.in/", 
       "abc", 
       1234567, 
       "abc@gmail.com", 
       "assdadsddsf", 
       "1" 

      ], 

      [ 
       "2", 
       "Data Tower", 
       "https://www.google.co.in/", 
       "abc", 
       1234567, 
       "abc@gmail.com", 
       "assdadsddsf", 
       "2" 
      ], 
      [ 
       "3", 
       "Enter business", 
       "https://www.google.co.in/", 
       "abc", 
       1234567, 
       "abc@gmail.com", 
       "assdadsddsf", 
       "3" 
      ], 
      [ 
       "4", 
       "IOT", 
       "https://www.google.co.in/", 
       "abc", 
       1234567, 
       "abc@gmail.com", 
       "assdadsddsf", 
       "4" 
      ], 
      [ 
       "5", 
       "Supplys Chain", 
       "https://www.google.co.in/", 
       "abc", 
       1234567, 
       "abc@gmail.com", 
       "assdadsddsf", 
       "5" 
      ], 
      [ 
       "6", 
       "Supplys Chain", 
       "https://www.google.co.in/", 
       "abc", 
       1234567, 
       "abc@gmail.com", 
       "assdadsddsf", 
       "6" 
      ] 

     ] 
    } 

Answer 1

让我们把第二个对象 “dataObj”。 dataObj.data包含一个数组数组，这就是为什么一个简单的ng-repeat不起作用。

dataObj.data [0] [0]将返回：

"1", 
 
    "supply chain Management", 
 
    "https://www.google.co.in/", 
 
    "abc", 
 
    1234567, 
 
    "abc@gmail.com", 
 
    "assdadsddsf", 
 
    "1"

$ scope.names是对象的数组。如果您将dataObj也更改为一个对象数组，它将起作用！

Answer 2

<div ng-app="myApp" ng-controller="myCtrl"> 
    <div class="container"> 
    <h2>To Access Single Array</h2> 
    <div class="panel panel-default" ng-repeat="data in datas"> 
     <div class="panel-heading">{{data[$index]}} </div> 
    </div> 
    </div> 
    <div class="container"> 
    <h2>To Access all data Array</h2> 
    <div class="panel panel-default" ng-repeat="data in datas"> 
     <div class="panel-heading">{{data}} </div> 
    </div> 
    </div> 
</div> 

AngularFile

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 

    var data = '{"data": [["1","supply chain Management", "https://www.google.co.in/","abc", 1234567,"abc@gmail.com","assdadsddsf", "1" ], [ "2", "Data Tower", "https://www.google.co.in/", "abc", 1234567, "abc@gmail.com", "assdadsddsf", "2" ], ["3","Enter business", "https://www.google.co.in/", "abc", 1234567, "abc@gmail.com","assdadsddsf", "3" ]]}' 

    $scope.datas = JSON.parse(data); 
}); 

播放代码在这里https://jsfiddle.net/ikismail7/2uufzqqh/