I trying to get the data from server and trying to render in UI but while making service call I am getting the below error.
Calling service API:
const json = request('http://localhost:8080/part/findall').then(response => response.json());
Error:
Task.js:243 Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1
at parse (<anonymous>)
at Task.js:243
at handler (ExtensiblePromise.js:137)
I am getting the data from server but while assign to json getting that above error. Can you please help me where I am doing mistake.
My response Json:
[{"id":485,"orderno":"00605164","type":"typeA","description":"description"},{"id":486,"orderno":"00605164","type":"typeB","description":"description"}]
This sounds like a serverside issue and not dojo related.
I reproduced your example with a sample json :
const json = request('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json());
and the data is fine.
Here is the complete example
import request from '#dojo/core/request';
import xhr from '#dojo/core/request/providers/xhr';
request.setDefaultProvider(xhr);
const json = request('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data));
Although the xhr is optional (it is the default, I guess) - this is fine in a browser and if you replace xhr by node it works fine in Node.js too.
How is your Server transferring the JSON - maybe as html ?
Also: What exactly is your dojo version?
More information for request than on https://dojo.io can be found in
https://github.com/dojo/core/tree/master/src/request
You got an array as response, try to use
response[0].json()
Related
I'm making a simple API in express js. I've an end point where I'll make a call to GitHub api int turn. My Front-end application will utilize it. Here is my code:
api.js
const express = require('express');
const router = express.Router();
...
var http = require('http');
var https = require("https");
router.get('/github', function (req, res) {
// APPROACH 1: Failed : fetch is not defined
// fetch('https://api.github.com/users/tmtanzeel')
// .then(response => response.json())
// .then(json => console.log(json))
// APPROACH 2: Failed : throw er; // Unhandled 'error' event
/*try {
https.get('https://api.github.com/users/tmtanzeel',function (res) {
console.log(res);
})
} catch (error) {
...
}*/
});
Both my approaches are failing. I've almost no experience with Express. Please picth in
The second method is almost corrent. Add the error handler and send to the caller the data you just received.
https.get('https://api.github.com/users/tmtanzeel',function (apiRes) {
apiRes.pipe(res);
}).on('error', (e) => {
console.error(e);
res.status(500).send('Something went wrong');
});
Handling the response (stream) received from the API call can be done in two ways.
Using pipes which is automatic
Handle read events and manage the data writing manually
I have used the first approach.
However, it is very well recommended that you get sound knowledge in handling Streams if you use Node JS. Streams are the basis of Node JS requests and responses.
https://nodejs.dev/learn/nodejs-streams
You should use Express to handle incoming requests.
(for example if your webapp fetches data from your (express) server).
Read the docs: http://expressjs.com
Your first attempt failed because fetch is an implementation of the web-browser, not one of nodejs.
If you want to use fetch try: https://www.npmjs.com/package/node-fetch
its a well documented, easy to use fetch function.
From your examples, all seems fine except I can't see you sending the returned data to the client.
You can try something similar like adding res.send(data) to send the data and make it available on the /github route
I am aware there are many answers related to this question but since nothing seems to work I am posting here.
I have NuxtJS/Vuejs application within which users can provide the GitHub URL (mostly the URL will contain the XML/JSON files). After getting the URL, I want to make a request to the URL using the axios and obtain the data present within the URL.
When I try to make a request i get the following error:
Access to XMLHttpRequest at 'GitHub URL' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'Some GITHUB URL', but only one is allowed.
When I provide the same URL in the browser then I get the 302 status and obtain the raw JSON/XML data after redirection. I want to implement the same in my code.
If data is not found in the URL then obtain the redirection URL from the response and make another request with the new URL. But due to the CORS error and other error GET GIT HUB URL net::ERR_FAILED I am unable to get the response.
I tried many things mentioned on the website such as:
Adding proxy as mentioned here: https://stackoverflow.com/a/55481649/7584240
Adding a prefix to URL as mentioned here: https://stackoverflow.com/a/56781665/7584240
Adding the condition to axios as mentioned here: https://stackoverflow.com/a/48293817/7584240
And many other things but nothing seems to work for me and getting the same error. Can someone please help me with this issue?
Following is the sample code I have (The code is part of VUEX Store actions):
export const actions = {
obtainURLData ({ commit, state, dispatch, rootState }, inputURL) {
axios
.get(inputURL)
.then((response) => {
console.log('INSIDE RESPONSE')
console.log(response)
console.log(response.data)
if (response.status === 200) {
}
})
.catch((error) => {
console.log('INSIDE ERROR')
console.log(error)
console.log(error.response)
console.log(error.response.data.detail)
console.log(error.response.status)
})
}
}
I am trying to run a GET request using an API but I am getting a reference error code when I run the script. I really appreciate any help with how to solve this!
Thank you
ERROR MESSAGE: "ReferenceError: GetAddressForRandomNftSale is not defined"
FRONTEND CODE:
Press on click event for #button1 to display result in a textbox #result
Code below
import {GetAddressForRandomNFTSale} from 'backend/serviceModule' ;
export function button1_click(event) {
GetAddressForRandomNftSale($w("address").value)
.then(address => { $w('#result').text})
}
BACKEND CODE:
The code to fetch the GET API request using "serviceModule.jsw"
Code below...
import {fetch} from 'wix-fetch';
export function GetAddressForRandomNftSale(address) {
const url = 'https://api.nft-maker.io/xxxx/xxxx/1/10000000'
console.log("url: " + url)
return fecth(url, {method: 'get'})
.then(response => response.json())
}
Documentation
API end points & documentation: https://api.nft-maker.io/swagger/index.html
Image
enter image description here
I think your call of the api (the url) is not correct. It must be:
https://api.easy-nft-projects.io/GetAddressForRandomNftSale/<api_key>/<project_id>/<number_of_nfts>/<amount_in_lovelace>
So you are missing the GetAddressForRandomNftSale in your url.
I try to use fetch() to get the data from https://swapi.co/
With this code I get undefined but in the "Network" section in chrome I see the data I need. How I can access it?
fetch('https://swapi.co/api/people/1/')
.then(resp => resp.json)
.then(obj => console.log(obj));
Hello this will fetch the data returning it as json
fetch('https://swapi.co/api/people/1')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});
If you have right environment for calling to the fetch API there maybe 2 result
You will get the right result data
You will get an error
fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function() {
// Your code for handling the data you get from the API
})
.catch (function() {
// This is where you run code if the server returns any errors
});
Use a catch for seen what is going wrong with your request
I am trying to do a post request in a vue js app using axios to a local API and the response is returning empty data. The post request on API is working fine using Postman tool. Below is my code
var the_data = {
title: 'This is title',
description: 'this is description'
}
axios.post('/api/snippets/insert', the_data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
On the API end, I am using a simple PHP script and printing whole $_POST request data using this code
var_dump($_POST);
But this is returning empty array.
I was running into this as well. Axios does not send the POST data in the form you're expecting. You need something like http://github.com/ljharb/qs and then use axios.post('/api/snippets/insert', Qs.stringify(the_data)). Please note this build on cdnjs uses Qs, not qs.
Alternatives to qs would be e.g. JSON.stringify() or jQuery's $.param().