Json data not well formated error - html

Question

json data not binding into table
controller code
$http(
{
method: 'post',
url: 'Service.asmx/WPGetDS',
data: $.param({ as_sql: "select * from testtab", strConKey: "Etech" }),
dataType: 'json',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function (data, status, headers, config) {
var myjson = JSON.parse(data);
$scope.dtDioSearch = myjson;
console.log(myjson);
}).error(function (data, status, headers, config) {
console.log(data);
});
Web Service Code
Public Sub WPGetDS(ByVal as_sql As String, ByVal strConKey As String)
Dim dt As New DataTable()
Dim conGlobal As New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings(strConKey).ConnectionString)
Dim a(0) As String
Dim dr As DataRow
Dim dtDataTable As DataTable
If conGlobal.State = ConnectionState.Closed Then conGlobal.Open()
Dim SDA = New SqlDataAdapter(as_sql, conGlobal)
Dim DS As DataSet = New DataSet()
Dim data As New WPData
Dim js As New JavaScriptSerializer()
Dim lCmdSql, lCmdErr As New SqlCommand
Try
dtDataTable = New DataTable("Table")
Dim dcolSrNo As DataColumn
dcolSrNo = New DataColumn("SlNo")
dcolSrNo.AutoIncrement = True
dcolSrNo.AutoIncrementSeed = 1
dcolSrNo.AutoIncrementStep = 1
dtDataTable.Columns.Add(dcolSrNo)
DS.Tables.Add(dtDataTable)
SDA.Fill(DS, ("Table"))
SDA.Dispose()
data.Message = ConvertDataTableTojSonString(DS.Tables(0))
Context.Response.Write(js.Serialize(data.Message))
Catch ex As Exception
dt.Columns.Clear()
dt.Columns.Add("Error")
dr = dt.NewRow
dr.Item("Error") = ex.Message.Trim
dt.Rows.Add(dr)
DS.Tables.Add(dt)
conGlobal.Close()
data.Message = ConvertDataTableTojSonString(DS.Tables(0))
Context.Response.Write(js.Serialize(data.Message))
Finally
If conGlobal.State = ConnectionState.Open Then conGlobal.Close()
End Try
End Sub
HTML Code
<div class="table-responisive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="erdata in dtDioSearch track by $index">
<td>{{erdata.SlNo}}</td>
<td>{{erdata.Test}}</td>
</tr>
</tbody>
</table>
</div>
Console Json data
[{"SlNo":1,"test":"test"},{"SlNo":2,"test":"test"},{"SlNo":3,"test":"test"},{"SlNo":4,"test":"test"},{"SlNo":5,"test":"test"},{"SlNo":6,"test":"test"},{"SlNo":7,"test":"test"},{"SlNo":8,"test":"test"},{"SlNo":9,"test":"test"},{"SlNo":10,"test":"test"},{"SlNo":11,"test":"test"},{"SlNo":12,"test":"test"},{"SlNo":13,"test":"test"},{"SlNo":14,"test":"test"},{"SlNo":15,"test":"test"},{"SlNo":16,"test":"test"},{"SlNo":17,"test":"test"},{"SlNo":18,"test":"test"},{"SlNo":19,"test":"test"},{"SlNo":20,"test":"test"},{"SlNo":21,"test":"test"},{"SlNo":22,"test":"test"}]
My problem is json data not bind to the html table. in firefox there was an error shown not well-formed in console. please help...

Answer 1

The first argument of your success callback will be a JavaScript object containing many properties including a data property whose value is the parsed JavaScript object based on the JSON returned by your API. Trying to parse a JavaScript object will result in error.
Try modifying the success method to:
.success(function (response, status, headers, config) {
var myjson = response.data;
$scope.dtDioSearch = myjson;
});

Answer 2

Public Function GetJSon(ByVal dt As DataTable) As List(Of Dictionary(Of String, Object))
Dim rows As New List(Of Dictionary(Of String, Object))
Dim row As Dictionary(Of String, Object)
'Return JsonConvert.SerializeObject(dt).ToList
'Return JSONString
For Each dr As DataRow In dt.Rows
row = New Dictionary(Of String, Object)
For Each col As DataColumn In dt.Columns
If col.DataType = GetType(Date) Then
Dim dtt As DateTime = DateTime.Parse(dr(col).ToString())
row.Add(col.ColumnName, dtt.ToString("dd-MM-yyyy hh:mm:ss"))
Else
row.Add(col.ColumnName, dr(col))
End If
Next
rows.Add(row)
Next
Return rows
End Function
#tj thank you for your support. the problem is json return string and i changed it to array list