The JSON object was not found in the AJAX response

I received a JSON object through an AJAX request.

When I use console.log(response); in the console, I can see my object. However, when I use

console.log(response.mostSearched);
, it returns undefined. Why is that?

I copied the object from the devTools console and placed it into my JavaScript code like this: var obj = {...etc};. Then I used console.log(obj.mostSearched); and it worked perfectly.

What am I missing that prevents it from working with console.log(response); ?

My Ajax request:

    var req = new Request({
        method: 'post',
        url: stats_ajax_cal,
        data: {
            'itemSelect': itemSelect,
            'type_of_graph': type_of_graph,
            'dateFrom': dateFrom,
            'dateTo': dateTo,
        },
        onSuccess: function(response) {
            console.log(response); // looks good
            var obj = response;
            console.log('***');
            console.log(obj); // looks good
            console.log(obj.mostSearched); // undefined

        }
    }).send();

My object:

{
    "mostSearched": {
        "title": "Most serached houses",
        "colNames": [],
        "rowNames": {
            "21": 1,
            "10": 2,
            "76": 1,
            "20": 1,
            "23": 1,
            "13": 3,
            "18": 1
        }
    },
    "timeOfDay": "",
    "averagePrice": 5904.8,
    "averageDuration": 0.6,
    "searchedDays": {
        "2013-12-21": 1,
        "2013-12-22": 1,
        "2013-12-23": 1,
        "2013-12-24": 1,
        "2013-12-25": 1,
        "2013-12-26": 1,
        "2013-12-27": 1,
        "2013-11-16": 2,
        "2013-11-17": 2,
        "2013-11-18": 2,
        "2013-11-19": 2,
        "2013-11-20": 2,
        "2013-11-21": 2,
        "2013-11-22": 2,
        "2013-11-23": 2,
        "2013-11-24": 2,
        "2013-11-25": 2,
        "2013-11-26": 2,
        "2013-11-27": 2,
        "2013-11-28": 2,
        "2013-11-29": 2,
        "2013-09-06": 4,
        "2013-09-07": 4,
        "2013-09-08": 4,
        "2013-09-09": 4,
        "2013-09-10": 4,
        "2013-09-11": 4,
        "2013-09-12": 1,
        "2013-10-07": 3,
        "2013-10-08": 3,
        "2013-10-09": 3,
        "2013-10-10": 3,
        "2013-10-11": 3,
        "2013-10-12": 3
    }
}

Answer №1

To extract data from the response string, utilize the JSON.parse method:

let information = JSON.parse(response);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up dynamic routes in a Vue.js Express application

I am currently working on a project that involves creating a basic Vue.js Express profile interface. This interface is responsible for retrieving profile information of a specific user based on a unique ID assigned to each user. The .get() request in Vue.j ...

Deciphering the intricate mechanics behind _.bind

This block of code is an excerpt from the Underscore library, specifically showcasing the implementation of the _.bind function. However, I am struggling to comprehend the purpose behind modifying the prototype of an empty function. var customConstruc ...

Solutions for accessing data variables outside of a Vue file

Utilizing Vue.js for data binding and filtering has been a rewarding experience. I've set up a Vue object within a .js file and now I aim to pass external data into it. Let's take a look at my test object testFile.js: var vm = new Vue({ el: ...

JavaScript, JQuery, and the Observer Design Pattern

Currently, I am in the process of developing a third-party application specifically for certain websites using Jquery. Lately, I have incorporated rx.Observable into my project. However, grasping the utilization of this new JS library has proven to be qui ...

Utilizing Vue.js to apply conditional statements or filters on v-for generated outputs

Currently, I am working on organizing my results by category. I believe there is room for improvement in the way it's being done: <div><h2>Gloves</h2></div> <div v-for="stash in stashes" :key="stash.id"> <div v-for= ...

Implementing jQuery Ajax: nesting Ajax calls within Ajax calls

Check out this code snippet for creating a contact form with minimalistic design and captcha spam protection: Minimalist Contact Form Below is the menu list structure: <ul class="menu"> <li class="company"><a href="#"> company</a&g ...

JavaScript library error: "Uncaught ReferenceError: numjs is undefined"

Hi there! I've recently started learning JavaScript and am currently exploring the functionalities of NumJS. However, I've encountered an error that's got me stumped. Even though the file "numjs.js" is included locally within the HTML, I kee ...

Enhanced Functionality: Dynamic URL Redirection using Ajax &

I want to redirect within a PHP file that is being called via AJAX. I have included the redirection code inside the file, but it doesn't seem to be working. Here is the code for the AJAX file: <?php ob_start(); include 'admin/includes/front_ ...

Reorganizing JSON Data

Within my JSON data structure, I have the following elements: { "row_elements": [ "[Product].[Corporation].[Corporation]", "[Product].[Int Product Name].[Int Product Name]", "[Product].[Local Product Name].[Loca ...

Seeking advice on a coding dilemma: What is the best way to enable users to click on each item in a list they submit

Hey there, I'm no expert in this field so I could really use some help with my PHP document. Here's the situation: I have a PHP document that includes a form. Every time a user submits text into the input field, the text is echoed as a list item ...

Sending an AJAX request to a REST service in order to submit the information captured in an HTML form

<html> <body> <form method="POST"> <label>username</lable> <input id="username" name="username" type="text"> <label>emailid</lable> <input id="emailid" ...

Is there a way to add more order details without having to refresh the page?

As a beginner in Django, I have created a checkout page where the user can change the input range number. However, only the first one seems to be sending data to the server. I suspect this is because I have set the same ID for all inputs and I am unable to ...

"Utilize the await/async and promise functions to pause and wait for a code to

I am facing an issue with using await/async in conjunction with Promise.all to retrieve arrays and proceed with the code. However, when I introduce a delay in the code, it seems like it's not functioning as expected. Below is my code snippet: asyn ...

How can I attach an event listener to an element that is added dynamically with jQuery?

I added a new div element dynamically using jQuery's on method. However, I'm having trouble getting a listener to work for the newly created element. HTML <input class="123" type="button" value="button" /> <input class="123" type="butt ...

Navigate through the overlay's content by scrolling

Objective: Looking to implement a scroll feature for long content. Issue: Not sure how to create a scroll that allows users to navigate through lengthy content. Thank you! function openNav() { document.getElementById("myNav").style.height = "1 ...

Triggering the open() function within an Ajax request

Upon experimenting with the method open(), I discovered that it requires a URL file as an argument. For instance, I have two functions named generateGeometricShapes() and colorShapes(). I am contemplating whether I should create separate files for each fu ...

Show JSON array items

My php file (history.php) generates a JSON object $i=1; $q=mysql_query("select * from participants where phone='".mysql_real_escape_string($_GET['phone'])."' limit 10"); while($rs=mysql_fetch_array($q)){ $response[$i] = $rs[&ap ...

Why won't my navigation bar stay in place when I scroll down on the screen?

I'm trying to create a sticky navigation bar that becomes fixed when the user scrolls down to 200 pixels, but it's not working properly. I want it to behave like in this example: import React,{useState,useEffect} from 'react' functio ...

To toggle between two scope variables within a view when one is not defined

In my application, I am utilizing two scope variables: $scope.banner and $scope.defaultBanner. The banner is fetched using a service, but in cases where the banner file does not exist, the variable will be empty as the service returns nothing. My goal is ...

Ensuring that the height of this specific div is set to 100% using

Is there a way to utilize the .height() method to fetch the height of each individual .post element and then assign it to the corresponding .left element? I have tried using this() but haven't been able to find a solution... Currently, my jQuery code ...