How do I get this button to return the api request in json format on click?-CodePudding

I'm trying to get the button with the id as 'testp' to return an api request in json format, but it is not working. Here is the HTML code link: https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-built-in-fetch.html

and here is the Javascript code link: https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-built-in-fetch.js

CodePudding user response：

As @Dov Rine mentioned, you can't have the same id more than once on a page, so make sure to fix that yourself (I didn't know if you needed it for something else, so I didn't touch them).
But anyways, here's the solution to your problem:

/*function getMethod() {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((json) => console.log(json));
}*/
function testp() {
  getData(
    "https://gorest.co.in/public/v1/users"
  ).then((data) => {
    document.getElementById("test").innerHTML = JSON.stringify(data);
  })
}
testp();
//GET
async function getData(url) {
  const response = await fetch(url, {
    method: "GET",
    headers: { "Content-Type": "application/json" },
    mode: "cors",
  });
  return response.json();
}

function getMethod() {
  getData("https://gorest.co.in/public/v1/users").then((data) => {
    console.log(data);
  });
}

//POST
async function postData(url = "", data = {}) {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

function postMethod() {
  postData("https://jsonplaceholder.typicode.com/posts", {
    id: 101,
    petId: 5,
    quantity: 0,
    shipDate: "2021-07-23T01:44:32.945Z",
    status: "placed",
    complete: false,
  }).then((data) => {
    console.log(data);
  });
}

//PUT
async function postData(url = "", data = {}) {
  const response = await fetch(url, {
    method: "PUT",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

function putMethod() {
  postData("https://jsonplaceholder.typicode.com/posts/1", {
    id: 1,
    petId: 5,
    quantity: 0,
    shipDate: "2021-07-23T01:44:32.945Z",
    status: "placed",
    complete: false,
  }).then((data) => {
    console.log(data);
  });
}

//DELETE
async function postData(url = "", data = {}) {
  const response = await fetch(url, {
    method: "DELETE",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

function deleteMethod() {
  postData("https://jsonplaceholder.typicode.com/posts/1", {}).then((data) => {
    console.log(data);
  });
}

   <body>
    <h1>Built-in fetch js</h1>

    <button id="runScript" onclick="getMethod()">Get Method</button>
    <br /><br />
    <button id="runScript" onclick="postMethod()">Post method</button>
    <br /><br />
    <button id="runScript" onclick="putMethod()">Put method</button>
    <br /><br />
    <button id="runScript" onclick="deleteMethod()">Delete method</button>

    <p id="test"></p>

Description of what I changed

You had a stray return response.json(); out of nowhere, so I removed it. Your

const testp = (document.getElementById("test").innerHTML = getData(
 "https://gorest.co.in/public/v1/users"
).then((data) => data));

only returned [object Promise] in the innerHTML, so I replaced it with the following function and called it:

function testp() {
  getData(
    "https://gorest.co.in/public/v1/users"
  ).then((data) => {
    document.getElementById("test").innerHTML = JSON.stringify(data);
  })
}
testp();

You also just can't do the following

document.getElementById("test").innerHTML = data;

as it would just display [object Object]. The correct way would be this ⬇:

document.getElementById("test").innerHTML = JSON.stringify(data);

as shown in the example.
Hope this helped!