使用angularjs将JSON字符串显示为html表 [英] display JSON string as html table using angularjs
本文介绍了使用angularjs将JSON字符串显示为html表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以，使用下面的C＃代码和HTML（也在下面），当我点击按钮时，我将有以下字符串 jSonString
我无法读取字符串在html页面的javascript中，我想在同一页面上使用angular JS显示它
任何帮助？
So, using the C# code below with the HTML (also below), when i click the button i will have the following string jSonString
I cant read the string in the javascript of the html page, i want to display it using angular JS on the same page
any help ?
[{"QuestionID":1,"Answer":"E","AnswerID":null,"QuestionNumber":1,"QuestionText":"Which language does Microsoft use to create apps","test_id":"1","theID":1},{"QuestionID":2,"Answer":"D","AnswerID":null,"QuestionNumber":2,"QuestionText":"Which of the following is not included in the Cs Language","test_id":"1","theID":2},{"QuestionID":3,"Answer":"A","AnswerID":null,"QuestionNumber":3,"QuestionText":"Which of the statements below is a proper method call for c","test_id":"1","theID":3},{"QuestionID":4,"Answer":"B","AnswerID":null,"QuestionNumber":4,"QuestionText":"In the WriteLine Method of the ","test_id":"1","theID":4}]
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.OleDb;
using System.Linq;
using System.Web;
public partial class _Default : System.Web.UI.Page
{
public DataTable GetDataTable()
{
DataTable dataTable = new DataTable();
using (OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|Quiz.mdb"))
{
OleDbCommand cmd = conn.CreateCommand();
cmd.CommandText = "select * from Questions";
cmd.CommandType = CommandType.Text;
if (conn.State != ConnectionState.Open)
conn.Open();
OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
dataTable.Load(dr);
}
return dataTable;
}
public String ConvertDataTableTojSonString(DataTable dataTable)
{
System.Web.Script.Serialization.JavaScriptSerializer serializer =
new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<String, Object>> tableRows = new List<Dictionary<String, Object>>();
Dictionary<String, Object> row;
foreach (DataRow dr in dataTable.Rows)
{
row = new Dictionary<String, Object>();
foreach (DataColumn col in dataTable.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
tableRows.Add(row);
}
return serializer.Serialize(tableRows);
}
protected void Button1_Click(object sender, EventArgs e)
{
DataTable dataTable = GetDataTable();
String jSonString = ConvertDataTableTojSonString(dataTable);
gv.DataSource = dataTable;
}
}
我用这个html < br $> b $ b
I use this html
<!DOCTYPE html>
<html ng-app="questionsApp">
<head>
<title></title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="questionsController">
search:<input type="text" ng-model="search" />
<table>
<tr ng-repeat="i in questions | filter:search">
<td>
{{i.QuestionID}}</td>
<td>
{{i.QuestionText }}</td>
</tr>
</table>
<script>
var app = angular.module('questionsApp', []);
app.controller('questionsController', function ($scope) {
$scope.questions = [{ "QuestionID": 1, "Answer": "koko", "AnswerID": null, "QuestionNumber": 1, "QuestionText": "koko Which language does Microsoft use to create apps", "test_id": "1", "theID": 1 }, { "QuestionID": 2, "Answer": "D", "AnswerID": null, "QuestionNumber": 2, "QuestionText": "Which of the following is not included in the Cs Language", "test_id": "1", "theID": 2 }, { "QuestionID": 3, "Answer": "A", "AnswerID": null, "QuestionNumber": 3, "QuestionText": "Which of the statements below is a proper method call for c", "test_id": "1", "theID": 3 }, { "QuestionID": 4, "Answer": "B", "AnswerID": null, "QuestionNumber": 4, "QuestionText": "In the WriteLine Method of the ", "test_id": "1", "theID": 4 }];
});
</script>
</div>
</body>
</html>
推荐答案
范围）{
scope.questions = [{QuestionID：1，答案：koko，AnswerID：null，QuestionNumber：1，QuestionText：koko Microsoft使用哪种语言创建应用，test_id：1 ，ID：1}，{QuestionID：2，答案：D，AnswerID：null，QuestionNumber：2，QuestionText：以下哪项不包含在Cs语言，test_id：1，theID：2}，{Qu estionID：3，Answer：A，AnswerID：null，QuestionNumber：3，QuestionText：下面哪个语句是对c的正确方法调用，test_id：1 ，ID：3}，{QuestionID：4，答案：B，AnswerID：null，QuestionNumber：4，QuestionText：在WriteLine方法中， test_id：1，theID：4}];
}）;
< / script >
< / div >
< / body >
< / html >
scope.questions = [{ "QuestionID": 1, "Answer": "koko", "AnswerID": null, "QuestionNumber": 1, "QuestionText": "koko Which language does Microsoft use to create apps", "test_id": "1", "theID": 1 }, { "QuestionID": 2, "Answer": "D", "AnswerID": null, "QuestionNumber": 2, "QuestionText": "Which of the following is not included in the Cs Language", "test_id": "1", "theID": 2 }, { "QuestionID": 3, "Answer": "A", "AnswerID": null, "QuestionNumber": 3, "QuestionText": "Which of the statements below is a proper method call for c", "test_id": "1", "theID": 3 }, { "QuestionID": 4, "Answer": "B", "AnswerID": null, "QuestionNumber": 4, "QuestionText": "In the WriteLine Method of the ", "test_id": "1", "theID": 4 }]; }); </script> </div> </body> </html>
请检查小提琴： http://jsfiddle.net/mjaric/pJ5BR/ [ ^ ]显示如何使用Angular.js
Please check the fiddle: http://jsfiddle.net/mjaric/pJ5BR/[^] which shows how to render Json using Angular.js
这篇关于使用angularjs将JSON字符串显示为html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
