JSON-Objekt in eine Liste übergeben

Ich bin neu in der Programmierung und habe ein JSON-Objekt mit Daten zu einer Münze. Ich möchte die Daten aus dem JSON-Objekt nehmen und mit Google-Charts anzeigen. Aber ich kann es anscheinend nicht funktionieren lassen. Jede Eingabe wird geschätzt.JSON-Objekt in eine Liste übergeben

Json Objekt

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

Münzklasse

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

     public string CoinValue 
     { 
      get; 
      set; 
     } 

     public int Count 
     { 
      get; 
      set; 
     } 

     public int CoinWeight 
     { 
      get; 
      set; 
     } 

}

Münze Modell:

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

Münze Controller: Ich vermute, dass die Daten-Methode ist es, was geändert werden muss jeden Datensatz hinzufügen in die Liste

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

Ansicht

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

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

Quelle

2017-12-01 Kalvinl8

Alles, was angezeigt wird, ist 2 leer google-Charts. Kein Fehler scheint zu erscheinen – Kalvinl8

Fügen Sie Ihre Frage nicht durch Kommentare hinzu. Eine Frage sollte eine vollständige Frage enthalten, ohne dass Kommentare zu beantworten sind. Sie können immer Ihre eigene Frage bearbeiten. –

Öffnen Sie Ihre Browser-Entwickler-Tools und suchen Sie nach der Ajax-Anfrage. Überprüfen Sie, dass es mit einem Erfolgscode (200-399) zurückkehrt, und dass die Antwort das ist, was Sie denken, dass es ist. – Taplar

Ihr aktueller Code ist eine Liste der CoinModel Objekte zurückkehrt und in der $.each Schleife, zugreifen Sie jedes CoinValue und Vounter Eigenschaften des Elements. Aber das CoinModel Objekt hat nur eine Eigenschaft, die coins ist, die eine Liste von Coin Objekten ist.

Alles, was Sie tun müssen, ist sicherzustellen, dass die Daten, die Sie senden, und Ihr $.each Code übereinstimmt. Zum Beispiel wird, wenn Sie Aktionsmethode eine Liste von Coin Objekten Rückkehr, können Sie eine Schleife durch sie auf Client-Seite und jeden CoinValue Eigenschaft Elementwert zuzugreifen

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

nun auf der Client-Seite, werden Sie Schleife durch diese json Array und dann können Sie Zugriff auf die CoinValue und CoinWeight Eigentum der einzelnen Elemente und verwenden, die das andere Array zu bauen, die Sie benötigen für die Darstellung des Diagramms

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

Quelle

2017-12-01 18:23:27 Shyju

Okay danke das macht mehr Sinn! Allerdings stammen meine Daten von einem JSON-Objekt, daher möchte ich die Liste nicht so hart codieren, wie Sie es haben. Wie komme ich damit klar? – Kalvinl8

Das ist y ich gefragt, was ist die genaue Struktur der Daten, die Ihre Aktionsmethode zurückgibt? Basierend auf der Struktur müssen Sie Ihren clientseitigen Code aktualisieren. – Shyju

JSON-Objekt in eine Liste übergeben

Antwort

Verwandte Themen