Pass rails variable to ajax in javascript

Question

I am new to rails. I am trying to use ajax and call a controller method. The controller method creates an instance variable which I presume is available to success callback in ajax.

However, whenever I run the code, JS console gives "test_array is null" error. Please suggest a solution and an insight into what is happening. The code is as follows.

I have thoroughly researched this issue on internet (including SO) but none of the answers seem to be fitting my problem.

sentiscores_controller.rb

def render_phrase
@tag_cloud_temp = [{text: 'Hello', weight: 1000},{text: 'World!', weight: 1100}]
end

index.html.erb

$.ajax({
        type: 'GET',
        url: '/sentiscores/render_phrase',
        data: {'senti_score': 5},
        success: function(){
        var test_array = <%= raw @tag_cloud_temp.to_json%>;
        console.log(test_array[0]['text']);
        },
        error: function(exception){
        console.log("Error! : "+exception);
        }
       })

The actual html source code looks like the following

 $.ajax({
            type: 'GET',
            url: '/sentiscores/render_phrase',
            data: {'senti_score': 5},
            success: function(){
                    var test_array = null;
                    console.log(test_array[0]['text']);
                    },
             error: function(exception){console.log("Error! : "+exception);}
                })

What's the output if you just log the full array? console.log(test_array) — jon1467
– jon1467, Commented Sep 26, 2017 at 14:29
@jon1467 if i log the full array it gives - null on the JS console. — AndEnthu
– AndEnthu, Commented Sep 26, 2017 at 15:57
@AndEnthu: Please include relevant code in the question and then indicate that the question has been updated after doing so. — David
– David, Commented Sep 26, 2017 at 16:01
@David have added the html source code. Also, the ajax function is getting called as response to a click of a stacked bar chart using highcharts. — AndEnthu
– AndEnthu, Commented Sep 26, 2017 at 16:07

Jonathan Bowman · Accepted Answer · 2017-09-26 14:37:09Z

5

In your controller, you'll want to render the JSON back to the AJAX call, like this:

# controller method    
@tag_cloud_temp = [{text: 'Hello', weight: 1000},{text: 'World!', weight: 1100}] 

render json: {
  tag_cloud_temp: @tag_cloud_temp
}

Then, in your AJAX call, you'll want to recieve the data from that render, like this:

// in ajax call
success: function(data) {
  console.log(data);
}

If you look at the data object, you should see the information from your controller.

answered Sep 26, 2017 at 14:37

Jonathan Bowman

1,6461 gold badge12 silver badges17 bronze badges

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

6 Comments

jvillian Over a year ago

Good answer. I was typing just about the exact same thing when you posted. I was also going to comment on why the OP can't use <%= raw @tag_cloud_temp.to_json%> on the client side since this seems to be a common source of confusion. Anyways, nice!

Jonathan Bowman Over a year ago

Ah, thanks and yeah that is a good point of learning, too, for sure!

AndEnthu Over a year ago

@JonathanBowman I made the modification suggested by you. The message that I now get is <unavailable> on JS console.

Jonathan Bowman Over a year ago

@AndEnthu Weird, I haven’t seen it say unavailable before...it should say undefined if that variable doesn’t exist. What browser are you using? Are you using the standard console or a third-party debugging tool? Also, just try it in another browser, using the built in console to see if you get anything different.

AndEnthu Over a year ago

@JonathanBowman...i was earlier trying on firefox, now i tried on chrome...now i see the object..thanks for helping

|

Collectives™ on Stack Overflow

Pass rails variable to ajax in javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related