Converting a Json value from a string to an integer

Question

I am trying to convert a JSON string into an integer so that I can use this data in a google chart. As of right now I can only get one set of data to be displayed in my chart.

Here is my JQUERY code:

$("#shotsandbigcc").click(function(){
//alert("Button works");     

$("#shotsandbigcc_popup").toggle();

var integer = $("#shotsandbigcc").attr("name");
//alert("integer: " + integer);

$.ajax('includes/test.php', {
    type: 'POST',  // http method
    data: {myData: integer},// data to submit
    dataType: 'json',
    success: function(response){
        google.charts.load('current', {packages: ['corechart', 'bar']});
        google.charts.setOnLoadCallback(drawMultSeries);
        function drawMultSeries() {
            var len = response.length;
            for(var i=0; i<len; i++){
            var year = response[i].Year;
            var ontarget = parseInt(response[i].Shots_on_Target);
            var offtarget = parseInt(response[i].Shots_off_Target);
            alert(ontarget);
            }
            alert(year);
            var data = google.visualization.arrayToDataTable([
                ['Year', 'Shots on Target', 'Shots off Target'],
                [year, ontarget, offtarget],
                [year, ontarget, offtarget]
            ]);
            var options = {
                title: 'Shooting Accuracy',
                chartArea: {width: '50%'},
                hAxis: {
                    title: 'Amount of Shots',
                    minValue: 0
                    },
                vAxis: {
                    title: 'Year'
                }
            };

            var chart = new google.visualization.BarChart(document.getElementById('shotsandbigcc_chart'));
            chart.draw(data, options);
}
                        
}
});
});

The JSON data is in an array which has this format [{"Year":"2019/2020","Shots_on_Target":"302","Shots_off_Target":"578","Accuracy":"0.34"},{"Year":"2020/2021","Shots_on_Target":"74","Shots_off_Target":"93","Accuracy":"0.44"}]

If someone could tell me how I can display both 2019/2020 and 2020/2021 data to be displayed. I would be most grateful as right now only the 2020/2021 data is being displayed. Thank you.

You can try something like var ontarget = +response[i].Shots_on_Target — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Dec 23, 2020 at 12:56

DETSUP · Accepted Answer · 2020-12-24 11:22:50Z

1

For integet value part:

var ontarget =  parseInt(response[i].Shots_on_Target);

For your data part:

var vizData = [];
vizData.push(['Year', 'Shots on Target', 'Shots off Target']);
for(var i=0; i<len; i++){
      var year = response[i].Year;
      var ontarget = parseInt(response[i].Shots_on_Target);
      var offtarget = parseInt(response[i].Shots_off_Target);
      vizData.push([year, ontarget, offtarget]);
      alert(ontarget);
     }
 alert(year);
 var data = google.visualization.arrayToDataTable(vizData);

explaination: since in the loop the values are getting updated in every iteration so, the 'year', 'ontarget' and 'offtarget' will have the latest values only. So on every iteration you have to store values so that they do not get overwritten. For that now this code is pushing in array in every iteration preserving the previous values. Which now you can use in the google.visualization function.

Happy Coding!

edited Dec 24, 2020 at 11:22

answered Dec 23, 2020 at 13:04

DETSUP

1076 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam_West Over a year ago

Thank you very much for your help. This has sorted the error of it being a string. I am now faced with the issue of that only the last set of data is being displayed. Any idea on how I can get both sets to be displayed?

DETSUP Over a year ago

@Sam_West hey, I have updated the answer. Your values were getting overwritten in the loop which were causing it to only show the latest set and not the previous values.

Sam_West Over a year ago

Thank you so much. This has sorted my problem. I'm very grateful.

Collectives™ on Stack Overflow

Converting a Json value from a string to an integer

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related