Passing JSON object into a list

Question

I am new to programming and have a json object with data related to a coin. I want to take the data from the json object and display it using google charts. However I can't seem to be able to get it working. Any input is appreciated.

Json object

    [{"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}]

Coin class

    public class Coin
    {
        public int ID
        {
            get;
            set;
        }

        public string CoinValue
        {
            get;
            set;
        }

        public int Count
        {
            get;
            set;
        }

        public int CoinWeight
        {
            get;
            set;
        }

}

Coin Model:

public class CoinModel
    {
        public IList<Coin> coins;
    }

Coin Controller: I suspect the Data method is what needs to be changed to add each record into the list

        // 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);
    }

View

<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>

HTML of view:

<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>

Answer 1

Your current code is returning a list of CoinModel objects and in the $.each loop, you are accessing each item's CoinValue and Vounter properties. But the CoinModel object has only one property, which is coins , which is a list of Coin objects.

All you have to do is to make sure the data you are sending and your $.each code matches. For example, if you action method is returning a list of Coin objects, you may loop through them at client side and access each item's CoinValue property value

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);
}

Now at the client side, you will loop through this json array and then you can access the CoinValue and CoinWeight property of each item and use that to build the other array which you need for rendering the chart

var dataArray = [];
$.each(result, function (i, obj) {
    dataArray.push([obj.CoinValue, obj.CoinWeight]);
});
data.addRows(dataArray);

Passing JSON object into a list

Question

1 answers

solution1
0 2017-12-01 18:23:27

Passing JSON object into a list

Question

1 answers

solution1 0 2017-12-01 18:23:27

solution1
0 2017-12-01 18:23:27