I'm using an external API to pull information from another site. I have the valid JSON stored in an instance variable called @result. However, passing it to the view, JavaScript doesn't recognize that it is JSON.

I have tried the following:

var data = JSON.stringify('<%= @result %>');
var apiData = JSON.parse(data);

Where the structure of @result is this:

[{"name"=>"VONDERSAAR, FRANK J", "fec_id"=>"H4AK00057", "pcc"=>"C00503896", "party"=>"D", "candidate_url"=>"/candidate/2014/vondersaar-frank-j/H4AK00057/", "race_url"=>"/race/2014/H/AK/00/", "ie_url"=>"/outside-spending/#?ordering=-expenditure_date_formatted&candidate_id_checked=H4AK00057", "is_incumbent"=>false, "cycle"=>"2014", "not_seeking_reelection"=>false, "other_office_sought"=>nil, "other_fec_id"=>nil, "election_year"=>2014, "state"=>"AK", "office"=>"H", "office_district"=>"00", "term_class"=>nil, "candidate_status"=>"LP", "total_expenditures"=>"0.00", "expenditures_supporting"=>"0.00", "expenditures_opposing"=>"0.00", "total_receipts"=>"500.00", "total_contributions"=>"0.00", "total_disbursements"=>"400.00", "cash_on_hand"=>"100.00", "cash_on_hand_date"=>"2014-07-31", "district"=>{"race_name"=>"2014 AK-00 (House)", "state"=>"AK", "office"=>"H", "office_district"=>"00", "term_class"=>nil, "id"=>541}, "outstanding_loans"=>"500.00", "cand_is_gen_winner"=>false, "status"=>"Lost in primary"}]

If I attempt to access the "name" attribute via:

console.log(apiData[0]["name"]);

It gives me

undefined

Another attempt:

var apiData = JSON.parse("<%= @result %>");

This gives me:

Uncaught SyntaxError: missing ) after argument list

I have also tried escaping "" but haven't gotten the syntax right.
I know the JSON is valid because I'm using it fine with the rest of my application. It's the handing off to JavaScript that is the problem. It treats it as a string and won't parse it correctly.

Edit

I should add that in my controller I am already parsing the api_result into JSON via Ruby.

api_result = [api call]
base       = JSON.parse(api_result)
@result    = base["results"]

Solution

I got it to work with the following. Controller:

api_result = [raw request]
@result    = api_result.to_json

View:

var apiData = <%= @result.to_json %>;

Thanks for the help everyone.

You can't toss the @result data directly to JS because, although what you think, it is not valid JSON (noted the hash-rockets “=>”?)

The solution is to properly format the @result data as JSON, using ruby, then passing the resulting data to JS. For that you can simply do:

require 'json'
@result.to_json

And then, on JS side:

var apiData = JSON.parse('<%= @result %>');

more