display the data json responses using javascript or in console - javascript

I have a page that has much data I want to use. I inspected the page with Google Chrome to find the URL of the data (Network XHR). I get the request URL and when I open it, it does not show me anything, but in the preview and in the responses I can see the data. I tested some JavaScript codes to get JSON data from this URL, but it always errors.
I tested some command in console to display the text responses in console but nothing please I need your help to get this data using JavaScript
some codes I tested:
fetch( 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?&action=get_vehicles' )
.then( response => response.text() )
.then( response => {
.then(function(data) {
console.log(data.data);
} );
`
headers
headers
responses
preview

You can get the fetch api call by going in the network tab in Chrome Developer Tools, clicking with right button in the request and then clicking in copy > copy as fetch like so:

fetch("https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?&action=get_vehicles")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((err) => console.log(err));

Related

How to I display the response from the network tab to a react component?

I am working on a react form and the form basically returns a response if a user is already registered in the database else the form submits successfully.
There's a fetch function that fetches a URL and returns a response.
I do get the following message in the network tab when an existing user with a mail id is present.
I need to show this message on my screen in a react component.
Here's the fetch body
fetch(URL, {
method: "POST",
mode: "no-cors",
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
"Access-Control-Allow-Origin": "*",
},
body: formBody,
})
.then((response) => console.log(response))
.catch((err) => console.log(err));
I am getting a response which is nowhere close to the response in the network tab. Tried using json() too, but I was getting some sort of an error with that.
Need help.
First you need to convert the response to JSON with the following .then((response) => response.json()). To get the response data message you get by fetching the URL you need to call the following code data.msg in your .then((data)=> {...}) function. If you want to print the message you have two options:
You can either log it to the console with console.log(data.msg)
return it in the component by first storing the message in a variable like this: let msg = data.msg in the .then(...) function and then adding the following code:
return (
<>
<h1> {msg} </h1>
...
</>
)

I want to get the URL data in response with post method in postman nodejs

I want to get data from URL in response. For example if any user gives the URL node JS code reads data and should give the output in response
below is the code I am trying with node JS but its not working
if(req.body.url){
fetch(req.body.url, res)
.then(response => res.json())
.then(json => res.send())
}
and in the postman body I am giving like below screenshot
it is not accepting YAML data. could any help me to get that

read file from computer javascript and print console.log its not print

when i debug this code in to chrome console then its not show any output or alert! please help me to complete this code! i need to get read my read.txt file text in to console.log....
the code was i try one is shows below.
function loadText() {
fetch('C:\Windows\Temp\read.txt')
.then(function(response){
return response.text();
})
.then(function(data){
console.log(data);
alert(data)
})
.catch(function(error){
console.log(error);
alert(data)
})
}
Try below code and indicate your directory like below
async function fetchText() {
let response = await fetch('../demo.txt');
console.log(response.status); // 200
console.log(response.statusText); // OK
if (response.status === 200) {
let data = await response.text();
console.log(data);
// handle data
}
}
fetchText();
This seems like a duplicate of this issue - AJAX request to local file system not working in Chrome?
The problems are the same, however you are using the fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) not an XMLHttp request (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
When i run loadText i get the following error:-
Fetch API cannot load . URL scheme must be "http" or "https" for CORS request.
You cannot make requests to the filesystem in Chrome. However you can disable Chrome security using flags (--allow-file-access-from-files)
see - Allow Google Chrome to use XMLHttpRequest to load a URL from a local file however this is not advised.
You will also need to update your path in the fetch function by prefixing with file:/// this tells it to look in the file system, and changed the protocol from http or https.

How do I fetch a base64 string via an API call

The Fetch API will not run when I try to get a base64 string. What am I missing?
I've tried using a standard fetch in javascript, which is fine on all other calls until it's base64. It doesn't even reach the alert.
fetch(vimgurlone)
.then(response => response.json())
.then(dataimage1 => {
alert("here");
document.getElementById("theactualdata").innerHTML = dataimage1.Content;
})
.catch(error => console.error(error))
The json response will be something like:
{ Content: "brtergbrtbrtbwrtnhtehrth4t5h......" }
I would like receive and then assign the data to a variable and then display it or at least get to the alert message in the code above. The variable/URL "vimgurlone" is valid and displays a json response when pasted into a browser, but the fetch will not run. Do I need to decode it or something? The base64 string can be quite long. Thanks.
Ignore me! the issue was the API hadn't enabled cross origin requests, the code above is fine.
Thanks for the suggestions.

javascript HTTP GET using Fetch API returns 401 Unauthorized but works in Postman

I've searched for already solved similar answers but no one helped, maybe I missed some small but important detail, please give me a hint.
I'm trying to make ordinary HTTP GET authorized request using Fetch API. It successfully works in Postman, but I cannot reproduce the same success in form of js code...((
The js code: https://codepen.io/iexcept/pen/jpEQgm?editors=1011
var url = 'https://core1.dev.bravais.com/api/v3/context/update';
document.cookie = 'Bravais-dev-Context="pP9xIpeU3JXF6+KIVtz2P/8bXJUq5A5FtRSfhDpA2ZrAgUqDOZZfuKnMvLPncMuDgj2Su8trzdDAzB5kAOcAmVD5sh95KdIBRlkyioIZeds8rXn0kk6XjfkWHs/L4jNZYWho4RsW3nELC4u9pO/V4uX6LhsG/LI7Qwsgtd0NTNj4aN4/uu92bESX2F0UZv5SZmRPsdtnCB1pIXpqf0KZ5ZqRdd8+R/wuHfeb6jsy5QI=";Domain=.dev.bravais.com;Path=/;Secure';
fetch(url, {
credentials: 'include', // include the cookie needed for authorization
})
.then(response => response.json())
.then(data => {
console.log(data) // Prints result from `response.json()`
})
.catch(error => console.error(error.toString()));
"TypeError: Failed to fetch"
Even the Chrome's ~"Allow CORS" extension doesn't help. It's installed and enabled:
But! the request works fine in the Postman app (with added the same auth cookie of course), proof:

Categories