title: How to bind JSON data which is converted from Dataset to HTML table using AngularJS's ng-repeat?
body: <blockquote>
    <p>{"tblSupplierMaster":[{"SupplierID":1,"SupplierCode":"VLTPX01","SupplierName":"TOOLEX PRECISION SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":2,"SupplierCode":"VSLBK01","SupplierName":"LEE BOON KWANG NRIC 710902-10-5407","State":"Selangor","Country":"Malaysia"},{"SupplierID":3,"SupplierCode":"VLGXX03","SupplierName":"GLOMATION SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":4,"SupplierCode":"VLJJL01","SupplierName":"JJ-LAPP CABLE (M) SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":5,"SupplierCode":"VLIXX01","SupplierName":"INDPRO (MALAYSIA) SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":6,"SupplierCode":"VLABX01","SupplierName":"AMMERAAL BELTECH SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":7,"SupplierCode":"VLAXX05","SupplierName":"ALSIGNOL SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":8,"SupplierCode":"VSJYE01","SupplierName":"J &amp; Y ENGINEERING WORKS","State":"Selangor","Country":"Malaysia"},{"SupplierID":9,"SupplierCode":"VLSLS01","SupplierName":"SLS BEARINGS (MALAYSIA) SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":10,"SupplierCode":"VEKKT01","SupplierName":"KEAN KEONG TYRE &amp; BATTERY SERVICES","State":"Selangor","Country":"Malaysia"}]}</p>
  </blockquote>
  
  <p>Above is the DataSet data which is converted via Webservice as the following code</p>
  
  <pre><code>    public class SupplierWebService : System.Web.Services.WebService
  {
  
      [WebMethod]
      public void fnGetSupplier()
      {
          DataSet dsSupplierMaster = null;
          clsPurchasingBO obj = new clsPurchasingBO();
          dsSupplierMaster = clsPurchasingBL.fnGetSupplierMaster(obj);
          //Context.Response.Write( DataSetExt.GetJSON(dsSupplierMaster));
          Context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(dsSupplierMaster));
          //return Newtonsoft.Json.JsonConvert.SerializeObject(;
      }   
  }
  </code></pre>
  
  <p>I want to bind the above data in my HTML table, the following is my try:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body ng-app="SupplierModule" &gt;
      &lt;div ng-controller="SupplierController"&gt;
          &lt;table border="1"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          SupplierID
                      &lt;/th&gt;
                      &lt;th&gt;
                          SupplierCode
                      &lt;/th&gt;
                      &lt;th&gt;
                          SupplierName
                      &lt;/th&gt;
  
                      &lt;th&gt;
                          State
                      &lt;/th&gt;
  
                      &lt;th&gt;
                          Country
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr ng-repeat="supplier in Suppliers"&gt;
                      &lt;td&gt;&lt;label ng-repeat="n in supplier.tblSupplierMaster"&gt;{{n.SupplierID}}&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;{{supplier.SupplierCode}}&lt;/td&gt;
                      &lt;td&gt;{{supplier.SupplierName}}&lt;/td&gt;
                      &lt;td&gt;{{supplier.State}}&lt;/td&gt;
                      &lt;td&gt;{{supplier.Country}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;script src="../JS/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="../JS/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="../Controller/SupplierController.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The Script (Controller) is as below:</p>
  
  <pre><code>/// &lt;reference path="../JS/angular-route.min.js" /&gt;
  /// &lt;reference path="../JS/angular.min.js" /&gt;
  var app = angular.module("SupplierModule", []);
  app.controller("SupplierController", function ($scope, $http) {
      $http.get('/Code/SupplierWebService.asmx/fnGetSupplier')
      .then(function (response) {
          $scope.Suppliers = response.data; debugger;
      });
  
  });
  </code></pre>
  
  <p><strong>My Observation</strong></p>
  
  <p>I observe  the issue is with the JSON data which is converted from dataSet, because it has got its datatable name 'tblSupplierMaster' included in the return data, that's why it's not binding.</p>
  
  <p>Below is the screenshot :
  <a href="https://i.stack.imgur.com/PQ5GD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PQ5GD.png" alt="enter image description here"></a></p>