Access JSON data using jquery

Question

I am trying to validate the uniqueness of an email address in my form using ajax but I don't know how to access the JSON data using jquery.

So far when a user enters an email address (currently on keyup ) the input gets sent to the controller and JSON data gets returned with a variable {"email_exists":true} or {"email_exists":false} depending on if the email address has been previously saved to the database or not. This works correctly.

I am using jquery to validate other form functions (email validation, field presence) on form submit, and dynamically showing errors depending on the problem.

My issue is that I have no idea how to access the returned JSON data using jquery. I am also struggling to access it from with erb, <%= p params[:email_exists] %> shows nothing. I am new to JSON and any help would be appreciated, thanks.

EDIT: This is how I'm validating the email address.

new.html.erb

$("#comingsoon_email").on('change keyup paste',function(){
        console.log("change?");
    $.post('/checkemail?email='+$("#comingsoon_email").val(),function(data){

routes.rb

post '/checkemail', to: 'comingsoons#emailcheck'

comingsoons_controller.rb

def emailcheck
  @comingsoon = Comingsoon.search(params[:email])
  respond_to do |format|
    format.json {render :json => {email_exists: @comingsoon.present?}}
  end
end

comingsoon.rb

def self.search(email)
        if email
            where('email = ?',email).first
        end

    end

JSON returns

{"email_exists":true} or {"email_exists":false} depending on if the email address has been previously saved to the database or not.

I want to display an error message via jquery if the email address has been taken.

If you're validating via Ajax then you should be doing something in your callback function (or promise/future/etc if that's the route you're taking). — Dave Newton
– Dave Newton, Commented Jun 3, 2016 at 14:32
I'm not sure I follow you. Ill add my current code to my question, maybe it'll clear things up. — Rob Hughes
– Rob Hughes, Commented Jun 3, 2016 at 14:34
You make a call to the server. That call (presumably using $.ajax or $.post or whatever) has success and failure callbacks. In those callbacks you access the data. You might want to take a step back and set a breakpoint in the JS debugger and take a look at what the parameters to those callbacks are. — Dave Newton
– Dave Newton, Commented Jun 3, 2016 at 14:35

Dave Newton · Accepted Answer · 2016-06-03 14:46:51Z

2

In the function you pass to $.post you have data. That's JSON.

data.email_exists is the value of that JSON data, roughly:

$.post('/checkemail?email='+$("#comingsoon_email").val(), function(data) {
  console.log(data.email_exists);
});

Vaguely related, you'll probably want to:

Clean the email field value
Create the URL outside of the function call to make it read easier
You can use $(this).val() instead of re-referencing the element, although this is purely readability, not functionality
Have the callback be an external function instead of an inline, anonymous function–again for readability, but also testability

So it'd end up looking more like:

function processEmailValidation(data) {
  var emailExists = data.email_exists;
  console.log(emailExists);
  // Do actual stuff
}

The keyup/change/paste handler would look more like:

var url = '/checkemail?email=' + $(this).val();
$.post(url, processEmailValidation);

You should handle Ajax failure gracefully as well, which I haven't reflected here.

Personally I'd also extract the keyup/change/paste handler as well, and separate out the DOM-specific code from the handler code, again for testability. But that's a separate issue.

edited Jun 3, 2016 at 14:46

answered Jun 3, 2016 at 14:40

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

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

3 Comments

Rob Hughes Over a year ago

Great answer, thankyou. The logs are printing the data, now I have to try and use it to 'do actual stuff'. Jquery is not my strong point so I'm going to have a play around and see if I can get my error message to pop up. The original jquery I used is copied and edited for my app, I will try and make some of the changes you suggested.

Rob Hughes Over a year ago

Ok sorted. if(emailExists == true) { SHOW ERROR MESSAGE } succesfully shows the message only when the email is already saved in the database. On another note, I have no idea how to gracefully handle ajax failure.

Dave Newton Over a year ago

@RobHughes The jQuery docs for $.post suggest a variety of ways; the easiest is to use $.post(url).done(functionRef).fail(functionRef)

Collectives™ on Stack Overflow

Access JSON data using jquery

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