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/