我是编程新手，有一个 json 对象，其中包含与硬币相关的数据。我想从 json 对象中获取数据并使用谷歌图表显示它。但是我似乎无法让它工作。任何输入表示赞赏。
Json对象
[{"id":1,"CoinValue":"0.01","Count":82,"CoinWeight":76},
{"id":2,"CoinValue":"0.02","Count":86,"CoinWeight":18},
{"id":3,"CoinValue":"0.05","Count":29,"CoinWeight":42},
{"id":4,"CoinValue":"0.1","Count":35,"CoinWeight":90},
{"id":5,"CoinValue":"0.2","Count":23,"CoinWeight":3},
{"id":30,"CoinValue":"0.5","Count":41,"CoinWeight":36}]
硬币类
public class Coin
{
public int ID
{
get;
set;
}
public string CoinValue
{
get;
set;
}
public int Count
{
get;
set;
}
public int CoinWeight
{
get;
set;
}
}
硬币模型:
public class CoinModel
{
public IList<Coin> coins;
}
Coin Controller:我怀疑需要更改 Data 方法以将每条记录添加到列表中
// GET: Coin
public ActionResult Index()
{
return View();
}
public ActionResult Data()
{
var fileContents = System.IO.File.ReadAllText(@"H:\EasyAsPiMVC\EasyAsPiMVC\App_Data\MOCK_DATA.json");
var coins = JsonConvert.DeserializeObject<List<CoinModel>>(fileContents);
return Json(coins);
}
查看
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: "Json",
contentType: "application/json",
url: '@Url.Action("Data", "Coin")',
success: function (result) {
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function () {
drawChart(result);
});
}
});
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn("string", "CoinValue"); //might have to be changed
data.addColumn("number", "Count");
var dataArray = [];
$.each(result, function (i, obj) {
dataArray.push([obj.CoinValue, obj.Vounter]);
});
data.addRows(dataArray);
var piechart_options = {
title: 'Coin Tracker Piechart',
width: 400,
height: 300
};
var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
piechart.draw(data, piechart_options);
var barchart_options = {
title: 'Coin Tracker barchart',
width: 400,
height: 300,
legend: 'none'
};
var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
barchart.draw(data, barchart_options);
}
});
</script>
View 的 HTML:
<body>
<table class="columns">
<tr>
<td><div id="piechart_div" style="border:1px solid #ccc"></div></td>
<td><div id="barchart_div" style="border:1px solid #ccc"></div></td>
</tr>
</table>
</body>
最佳答案
您当前的代码正在返回 CoinModel 对象的列表，并且在 $.each 循环中，您正在访问每个项目的 CoinValue 和 Vounter 属性。但是 CoinModel 对象只有一个属性，即 coins，它是 Coin 对象的列表。
您所要做的就是确保您发送的数据和您的$.each 代码匹配。例如，如果您的操作方法返回一个 Coin 对象列表，您可以在客户端循环遍历它们并访问每个项目的 CoinValue 属性值
public ActionResult Data()
{
var coins = new List<Coin>
{
new Coin() {Count = 1, CoinValue = "Aa",CoinWeight = 50},
new Coin() {Count = 2, CoinValue = "Bb",CoinWeight = 20},
new Coin() {Count = 3, CoinValue = "Cc",CoinWeight = 30}
};
return Json(coins);
}
现在在客户端，您将遍历这个 json 数组，然后您可以访问每个项目的 CoinValue 和 CoinWeight 属性，并使用它们来构建另一个渲染图表所需的数组
var dataArray = [];
$.each(result, function (i, obj) {
dataArray.push([obj.CoinValue, obj.CoinWeight]);
});
data.addRows(dataArray);
关于c# - 将 JSON 对象传递到列表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47599004/