Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – replace part of string in json in a fetch-response

I’m trying to replace part of a response before outputting it to a html document. Specifically I want to delete part of the response using replace.

fetch('https://api.foo.bar/5H2F8QXNTRW7P7LNL1KHXL76JQXXI2')
    .then(response => response.json())
    .then(json.replace(" and null Cent", "")) // trying to delete this part
    .then(json => document.getElementById("betrag").innerHTML = json)
    .catch(err => console.log('Request Failed', err));

It’s been working fine until I tried to delete part of the response. The console shows

Uncaught ReferenceError: json is not defined

I’m not getting this error without the line trying to replace part of the response. I#m lost.

I tried json.replace and response.replace without success.

Tags:

2

Answers


  1. 0 
    fetch('https://api.foo.bar/5H2F8QXNTRW7P7LNL1KHXL76JQXXI2')
    .then(response => response.json())
    .then(json => {
        // Convert the JSON object to a string to perform the replacement
        let jsonString = JSON.stringify(json);

        // Replace the specific part of the text
        jsonString = jsonString.replace(" and null Cent", "");

        // Parse the modified string back to a JSON object
        let modifiedJson = JSON.parse(jsonString);

        // Update the HTML element with the modified JSON data
        document.getElementById("betrag").innerHTML = modifiedJson;
    })
    .catch(err => console.log('Request Failed', err));
    Login or Signup to reply.
  2. 0

    The issue here is that you’re trying to use the replace method on the json object, but json is not defined in that scope. The replace method is a string method, so you need to use it on a string.

    Assuming the API returns a JSON object with a string property that you want to modify, you can do something like this:

    fetch('https://api.foo.bar/5H2F8QXNTRW7P7LNL1KHXL76JQXXI2')
    .then(response => response.json())
    .then(json => {
        // Assuming json is an object with a string property
        // Replace the string property with the modified string
        for (const key in json) {
            if (typeof json[key] === 'string') {
                json[key] = json[key].replace(" and null Cent", "");
            }
        }
        return json;
    })
    .then(json => document.getElementById("betrag").innerHTML = JSON.stringify(json))
    .catch(err => console.log('Request Failed', err));

    If the API returns a plain string, you can simply use the replace method on the response text:

    fetch('https://api.foo.bar/5H2F8QXNTRW7P7LNL1KHXL76JQXXI2')
    .then(response => response.text())
    .then(text => text.replace(" and null Cent", ""))
    .then(text => document.getElementById("betrag").innerHTML = text)
    .catch(err => console.log('Request Failed', err));

    Note that in the first example, I used JSON.stringify(json) to convert the JSON object to a string before assigning it to the innerHTML property. This is because innerHTML expects a string, not a JSON object.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search