Having trouble with JavaScript's XMLHttpRequest returning an 'undefined' string on the first run of my script. I need to find a way to ensure that it loads correctly during

Question

Having trouble with JavaScript's XMLHttpRequest returning an 'undefined' string on the first run of my script. I need to find a way to ensure that it loads correctly during

Before we dive in, a quick disclaimer: My knowledge of JS is limited, and I typically learn on the go when creating scripts. However, my usual method didn't work this time.

Currently, I'm working on a small JS script that will function as a bookmarklet. The goal is to utilize the Tinder API to display profile pictures of users who have liked them - a feature usually available with Gold membership.

Here's what the current script looks like:

var stringz;
var xhr = new XMLHttpRequest();
var tokez = localStorage.getItem("TinderWeb/APIToken");
var url = "https://api.gotinder.com/v2/fast-match/teasers?locale=en";
xhr.withCredentials = true;
xhr.open("GET", url);
xhr.setRequestHeader("accept", "application/json");
xhr.setRequestHeader("content-type", "application/json; charset=utf-8");
xhr.setRequestHeader("x-auth-token", tokez);
xhr.setRequestHeader("tinder-version", "2.35.0");
xhr.setRequestHeader("platform", "web");
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        stringz = xhr.responseText;
        return stringz;
    }
};
//Converting the xhr response into a JSON string
var jasonstring = JSON.parse(stringz);
//Extracting the URLs
var jasonstrung = jasonstring.data.results.map(x => x.user.photos.map(y => y.url));
//Formatting the URLs into a nicely structured JSON string
var jason = JSON.stringify(jasonstrung, null, 4);
//Checking the output
console.log(jason);

I perform both JSON.parse and JSON.stringify because the data returned by xhr appears as a text string formatted like JSON, but it isn't actually JSON. Therefore, I need to parse it to extract the desired elements and then format them for better readability.

When running this script in the Chrome Dev Console for the first time, it throws an error:

VM5418:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at <anonymous>:18:24

The reason for this error could be that 'stringz' is still undefined when JSON.parse attempts to process it.

However, after the script finishes executing, typing console.log(stringz) reveals the expected string. If the script is run twice, the final dataset is printed out as desired:

[
    [
        "https://preview.gotinder.com/5ea6601a4a11120100e84f58/original_65b52a4a-e2b2-4fdb-a9e6-cb16cf4f91c6.jpeg"
    ],
    // More URLs here...
]

Is there a way to make this script work seamlessly in one go (like a bookmarklet)? Unfortunately, using setTimeout doesn't seem to resolve the issue, possibly due to the delay in populating 'stringz' before applying JSON.parse.

Thank you!

javascript json xmlhttprequest

Answer 1

Answer №1

The issue arises from the fact that XHR functions asynchronously: it sends a request and receives a response later, while other lines of code continue to execute in the meantime.

To properly transform your JSON string, you need to ensure that the transformation occurs only after the response has been received. This means placing your code within the xhr.onreadystatechange function (I have commented out some parts for demonstration purposes):

var jsonString;
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts";

xhr.open("GET", url);

xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // response handling
    jsonString = this.responseText;

    // initiate JSON transformation upon response arrival
    jsonTransform(jsonString)
    return jsonString;
  }
};

xhr.send();

var synchronous = 'this will be logged before response arrives'

console.log(synchronous)

function jsonTransform(jsonString) {
  var jsonObject = JSON.parse(jsonString);
  const jsonFormatted = JSON.stringify(jsonObject)
  console.log(jsonFormatted);
}

Alternative Approach

Consider using fetch() instead of xhr which simplifies the process by providing a Promise-based syntax:

More information on fetch():

const url = "https://jsonplaceholder.typicode.com/posts";

fetch(url)
  .then(resp => {
    return resp.json()
  })
  .then(json => {
    console.log(json)
  })
  .catch(err => {
    console.log(err)
  })

You can utilize fetch() along with the user-friendly async-await syntax for a more synchronous-feeling code structure:

const url = "https://jsonplaceholder.typicode.com/posts";

async function fetchAPI(url) {
  try {
    const response = await fetch(url)
    const json = await response.json()
    console.log(json)
  } catch (err) {
    console.log(err)
  }
}

fetchAPI(url)

Answer 2

The issue arises from the fact that XHR functions asynchronously: it sends a request and receives a response later, while other lines of code continue to execute in the meantime.

To properly transform your JSON string, you need to ensure that the transformation occurs only after the response has been received. This means placing your code within the xhr.onreadystatechange function (I have commented out some parts for demonstration purposes):

var jsonString;
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts";

xhr.open("GET", url);

xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // response handling
    jsonString = this.responseText;

    // initiate JSON transformation upon response arrival
    jsonTransform(jsonString)
    return jsonString;
  }
};

xhr.send();

var synchronous = 'this will be logged before response arrives'

console.log(synchronous)

function jsonTransform(jsonString) {
  var jsonObject = JSON.parse(jsonString);
  const jsonFormatted = JSON.stringify(jsonObject)
  console.log(jsonFormatted);
}

Alternative Approach

Consider using fetch() instead of xhr which simplifies the process by providing a Promise-based syntax:

More information on fetch():

const url = "https://jsonplaceholder.typicode.com/posts";

fetch(url)
  .then(resp => {
    return resp.json()
  })
  .then(json => {
    console.log(json)
  })
  .catch(err => {
    console.log(err)
  })

You can utilize fetch() along with the user-friendly async-await syntax for a more synchronous-feeling code structure:

const url = "https://jsonplaceholder.typicode.com/posts";

async function fetchAPI(url) {
  try {
    const response = await fetch(url)
    const json = await response.json()
    console.log(json)
  } catch (err) {
    console.log(err)
  }
}

fetchAPI(url)

Having trouble with JavaScript's XMLHttpRequest returning an 'undefined' string on the first run of my script. I need to find a way to ensure that it loads correctly during

Answer №1

Alternative Approach

Similar questions

Converting JSON data into Dart format

What are some ways to create a multi-select event?

Strategies for persisting data in React using local storage to ensure information is retained after page refresh

What is the reason for typescript's lack of a "function" type?

SQL: Retain data from convoluted JSON nested column containing escape characters

Can you explain the JSON serialization that is likely to occur for a 'oneof' protobuf field?

Exploring the DOM with jQuery to effectively select multiple elements

Encountering a timeout error while using selenium-webdriver and phantomJS

Learn how to extract data from the "this" object in JavaScript

The HTTP request seems to be malfunctioning

As the user types, the DD/MM/YYYY format will automatically be recognized in the

Tips on incorporating the Browserified npm package into an Angular controller

Indeed, verifying parent.parent access

Retrieving a result from the reduce function in Angular

Ensuring all ajax calls have completed before proceeding using selenium webdriverjs

The pure JavaScript function for changing the background color in CSS is not functioning properly

Is jest the ideal tool for testing an Angular Library?

The compression feature in express.js middleware is not functioning correctly

Updating a class within an AngularJS directive: A step-by-step guide

Using Typescript: invoking static functions within a constructor