javascript unusual comparison between strings

Question

javascript unusual comparison between strings

I am working on an ajax function that is responsible for sending emails and receiving responses from the server in a JSON format with type being either success or error.

$("#submit_btn").click(function(event) { 
    event.preventDefault();

    var post_data = {
        'email': $("#email").val()
    };
    $.post( "sendEmail.php", post_data ).done(function(response){
        if(response.type == 'success'){
            $("#sentmail").fadeIn("slow")
            setTimeout(function(){
                $("#mail").val("Enter your email here");

                $("#sentmail").fadeOut("slow")  
            },3000);
        }
        else{
            $("#sentmailfail").fadeIn("slow")
            setTimeout(function(){
                $("#mail").val("Enter your email here");

                $("#sentmailfail").fadeOut("slow")  
            },3000);
        }
    },"json")
});

What I find intriguing is when I console.log(response), it shows something like

{"type":"success","desc":"something"}

. However, immediately after that,

console.log( (response.type == "error") ) // TRUE

.

If I store the console logged response into a variable, say

a = {"type":"success","desc":"something"}

, then a.type == "error" evaluates to false.

Could someone shed some light on this peculiar behavior?

javascript ajax

Answer 1

Answer №1

If you see the output of console.log(response) as

{"type":"success","desc":"something"}

then it is likely that response is still in string format (containing JSON) and strings do not have a type property:

> "foo".type == "error" // `undefined` is never equal to a string
false

Objects appear differently in the console usually:

> console.log({"type":"success","desc":"something"})
Object {type: "success", desc: "something"} // at least in Chrome and Firefox

Tip: Make sure to parse the string first:

response = JSON.parse(response);

Regarding jQuery:

I noticed that your intention is to let jQuery handle the JSON parsing, but you are passing "json" to the wrong function. It should be passed to $.post(...), not to .done(...):

$.post("sendEmail.php", post_data, "json").done(...);
// instead of 
// $.post("sendEmail.php", post_data).done(..., "json");

This way, manual parsing is not required.

Related: How to Parse JSON in JavaScript?

Answer 2

If you see the output of console.log(response) as

{"type":"success","desc":"something"}

then it is likely that response is still in string format (containing JSON) and strings do not have a type property:

> "foo".type == "error" // `undefined` is never equal to a string
false

Objects appear differently in the console usually:

> console.log({"type":"success","desc":"something"})
Object {type: "success", desc: "something"} // at least in Chrome and Firefox

Tip: Make sure to parse the string first:

response = JSON.parse(response);

Regarding jQuery:

I noticed that your intention is to let jQuery handle the JSON parsing, but you are passing "json" to the wrong function. It should be passed to $.post(...), not to .done(...):

$.post("sendEmail.php", post_data, "json").done(...);
// instead of 
// $.post("sendEmail.php", post_data).done(..., "json");

This way, manual parsing is not required.

Related: How to Parse JSON in JavaScript?

javascript unusual comparison between strings

Answer №1

Similar questions

What can be done to resolve the slowdown caused by an Ajax request within the function?

"Time" for creating a date with just the year or the month and year

refresh PHP automatically using JavaScript

Transferring a Query between Domains with the Help of JavaScript

Identifying the Origin of the Mouse Pointer When Hovering Over Elements

Incorporate Vue into a template using variables and props

Disable the sorting feature on selected columns

Trying out the effectiveness of Ajax for email validation on a Rails platform

Hiding icons in a jquery datatable's table

Child element casting shadow over parent element

What is the process of including data in Vue using refs?

Tips for Sending an Ajax POST Request

Utilizing Socket IO and Node JS to stream audio from a microphone via sockets

Using JavaScript build-in functions in a Vue template allows for enhanced functionality and

The Webix component is experiencing a lack of refreshment

Ajax request received no data from API

How can I incorporate arithmetic operators within a function in EJS?

A guide on showcasing real-time data with Angular's service feature

Developing a dynamic slideshow using jQuery

Grails - fetching data upon page load and retrieving via ajax request