CODEWITHSUNDEEP
javascriptreactjsfetch
maxdelia
maxdelia

Reputation: 868

A property named "locale" in my API response body is being overridden in some browsers

I have an API returning this kind of payload in its response body:

{ "id": 1, "name": [{ "locale": "en", "value": "example" }] }

I'm calling this API using the following code in a React web app:

async function getAsync(url) {
  return fetch(url, {
    method: "GET",
    mode: "cors",
    credentials: "include",
    headers: {
      ...commonHeaders, // Just for auth
    },
  })
}

async function getResponse() {
  const url = `...` // API url
  let res
  try {
    res = await getAsync(url)
    switch (res.status) {
      case 200:
        const resBody = await res.json()
        return Promise.resolve(resBody)
      ...
      default:
        return Promise.reject(new GenericError())
    }
  } catch (err) {
    return Promise.reject(new GenericError())
  }
}

The problem is the following: When I print in console JSON.stringify(resBody) I get the correct payload (of course as a JSON string), but if I print resBody its property name.locale has my locale ("it") instead of "en"!

Why is it happening? What's going on here???

This happens in both Firefox (85.0.2) and Chrome (88.0.4324.150) but NOT in Safari (14.0.2).

Upvotes: 1

Views: 140

Answers (1)

maxdelia
maxdelia

Reputation: 868

I've found the reason! It was a nasty side-effect present in a completely different asynchronous function in my UI, caused by these very wrong comparisons (please notice = used instead of ===):

{
  name_en: name.filter(item => item.locale = "en").value || "",
  name_it: name.filter(item => item.locale = "it").value || "",
}

Upvotes: 1

Related Questions