Using AmCharts to create bar chart from JSON object retrieved from localStorage

Question

I'm trying to create a bar chart using AmCharts using an array that is part of a larger JSON object that is being retrieved from localStorage. Basically, what I do is retrieve the JSON string, parse it back to JSON object, search take the specific array I'm dealing with ("results"), search that array for the result I'm looking for (via "id"), and then take the array I need ("scores") from that specific result. Then, I use that array as the input for the AmChart code.

I've tested the AmChart code with another sample array (defined in the code) and it works fine. However, when I try to retrieve from localStorage, I am unable to get the chart to display. Any thoughts as to why? The code in question is here:

//retrieve initial results response from localstorage 
var search_results = localStorage.getItem("results_response"); 

//convert retrieved string back to JSON array 
var search_results_object = JSON.parse(search_results); //search_results_objects is now a JSON array 

var results = search_results_object.results; //pull out results array 

//get venue_id of detail page from local storage 
var ven_id = localStorage.getItem("country_id"); 

//search JSON response for venue ID 
var chartDataResults = []; 
var searchField = "id"; 
var searchVal = ven_id; 
for (var i=0 ; i < results.length ; i++) 
{ 
if (results[i][searchField] == searchVal) { 
    chartDataResults.push(results[i]); 
} 
}  

var chartDataInput = chartDataResults.scores; 

//this all works:
var chartData = chartDataInput; 

var chart = new AmCharts.AmSerialChart(); 
chart.dataProvider = chartData; 
chart.categoryField = "country"; 
chart.rotate = true; 

var graph = new AmCharts.AmGraph(); 
graph.valueField = "score"; 
graph.type = "column"; 
chart.addGraph(graph); 

var categoryAxis = chart.categoryAxis; 
categoryAxis.autoGridCount = false; 
categoryAxis.gridCount = chartData.length; 
categoryAxis.gridPosition = "start"; 
categoryAxis.labelRotation = 90; 
graph.fillAlphas = 0.8; 
chart.write('chartdiv'); 

Most recently, the dev console in Chrome has told me "Uncaught TypeError: Cannot read property 'length' of undefined". The chart does not render, either. Thoughts? I appreciate any and all help.

Answer 1

Your code fails because of this:

var chartDataInput = chartDataResults.scores; 

chartDataResults is an array by your declaration, not an object. According to the amDocs you could pass chartDataResults directly, given that it is in the correct format, eg [{title:"sample 1",value:130},{title:"sample 2",value:26}];.

If so - try to replace:

var chartDataInput = chartDataResults.scores; 

//this all works:
var chartData = chartDataInput; 

with

var chartData = chartDataResults; 

If you chartDataResults array is not in the correct format, you need to construct it in that loop. Something like:

for (var i=0 ; i < results.length ; i++)  { 
  if (results[i][searchField] == searchVal) { 
    var aResult = new Object();
    aResult.title = results[i].title; // or results[i]['title']
    aResult.value = parseInt(results[i].value); // or results[i]['value']
    chartDataResults.push(aResult); 
  } 
} 

I am speculating that in your json objects you have .title and .value. If not - replace them accordingly. If you're not sure :) what properties they have - print them to the console and inspect them.