Convert Dictionary to Array

Question

I have a Controller that generates a list of Graphs as you can see below:

[EXEMPLO DE DADOS]
Pergunta: Estrutura
Dados: [1, 3]
       [2, 5]
       [3, 1]
       [4, 0]
       [5, 10]

Pergunta: Organização
Dados: [1, 2]
       [2, 0]
       [3, 3]
       [4, 2]
       [5, 7]

public class Grafico
{
    public string Pergunta { get; set; }
    public Dictionary<int, int> Dados { get; set; }
}

[Controller]
public ActionResult Grafico()
{
    List<Grafico> graficos = GeraGraficos(modulo, satisfacao);          
    return View(graficos);
}

To display in View I can display like this:

[View]

@foreach (var grafico in model)
{
    <h2>@grafico.Pergunta</h2>
    foreach (var dados in grafico.Dados)
    {
        <label><b>@dados.Key - </b> @dados.Value</label><br />
    }
}

But I needed to convert this list of charts into a Javascript array in order to display this data in graph.

Example how I would need:

var data = [
            { label: "1",  data: 3},
            { label: "2",  data: 5},
            { label: "3",  data: 1},
            { label: "4",  data: 0},
            { label: "5",  data: 10},

        ];

Answer 1

In this case I believe it’s best to use one JsonResult to return JSON instead of HTML.

Remembering that Dictionary<T, X> cannot be serialized using the method Json().

Model

using System;
using System.Collections.Generic;
using System.Runtime.Serialization;

namespace MvcApp
{
    public class Grafico
    {
        public string Pergunta { get; set; }
        public List<Dado> Dados { get; set; }
    }

    [DataContract]
    public class Dado
    {
        [DataMember(Name="label")]
        public int Label { get; set; }
        [DataMember(Name="data")]
        public int Data { get; set; }
    }
}

Controller

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace MvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public JsonResult Index()
        {
            var graficos = GetGraficos();
            return Json(graficos, JsonRequestBehavior.AllowGet);
        }


        private List<Grafico> GetGraficos() {
            var lista = new List<Grafico>() {
                new Grafico() {
                    Pergunta = "Estrutura",
                    Dados = new List<Dado>() {
                        new Dado() { Label =  1, Data = 3 },
                        new Dado() { Label =  2, Data = 5 },
                        new Dado() { Label =  3, Data = 1 },
                        new Dado() { Label =  4, Data = 0 },
                        new Dado() { Label =  5, Data = 10 },
                    }
                },
                new Grafico() {
                    Pergunta = "Organização",
                    Dados = new List<Dado>() {
                        new Dado() { Label =  1, Data = 2 },
                        new Dado() { Label =  2, Data = 0 },
                        new Dado() { Label =  3, Data = 3 },
                        new Dado() { Label =  4, Data = 2 },
                        new Dado() { Label =  5, Data = 7 },
                    }
                },
            };
            return lista;
        }
    }
}

Dotnetfiddle