How to send two arrays simultaneously to view using JSON asp.net MVC

I have to create a dynamic chart in my view based off a value a user would enter into an input contained in a beginform in my view, however it has to be done asynchronously thus why I am using Ajax and Json, I send the user input to the controller fine and then using that input my code creates two Arrays one string array that would be used as my labels for my chart and the other an int array that is used as the data values for the chart.

My issue is that I only manage to send one of those array’s mentioned above and can’t send them both and I am not sure how this would be done, I read somewhere that I could send the arrays as a collection but I’m not sure if this is correct.

Code in controller (I have removed all the code not related to the question and simplified it for illustration purposes):

        public ActionResult DoChart(string data)
        {
            string[] product = {"Bread", "Milk", "Eggs", "Butter"};
            int[] quant = {10, 20, 30, 40};

            return Json(product, JsonRequestBehavior.AllowGet);
        }

Javascript code in my View:

<script>
    $(() => {
        $("form#chartForm").on("submit", (e) => {
            e.preventDefault();
            let obj = {
                quantity: $("#quantity").val()
            };
            $.ajax({
                url: "@Url.Action("DoChart")",
                method: "GET",
                data: {
                    data: JSON.stringify(obj)
                },
                success: (product, status) => {
                    alert(product);
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: product,
                            datasets: [{
                                label: '# of Votes',
                                data: [1,2,3,4,5,6,7,8],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    });
                }
            });
        });
    });
</script>

So in my code above I am sending the product array and then setting the labels for my chart, but I want to send the quant array as well and set the data values for my chart.

PS: I am using Chart.Js to create my chart.

Any help would be much appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Initially, you need a holder for your result. For example, you can create a holder class like below

 public class MapResult
        {
            public string[] Products { get; set; }
            public int[] Quantity { get; set; }
        }

Controller

You can set the values of MapResult class from your controller, It has 2 arrays, One for product and 1 for quantity.

public ActionResult DoChart(string data)
        {
            string[] product = { "Bread", "Milk", "Eggs", "Butter" };
            int[] quant = { 10, 20, 30, 40 };

            var mapResult = new MapResult()
            {
                Products = product,
                Quantity = quant
            };

            return Json(mapResult, JsonRequestBehavior.AllowGet);
        }

AJAX Success code

AJAX result contains two arrays. You can add those to your map.

 success: (result, status) => {
                    alert(result.Products);
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: result.Products,
                            datasets: [{
                                label: '# of Votes',
                                data: result.Quantity,
                                borderWidth: 1
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    });

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0