We Keep Coding

Post API is not working giving error Unexpected token < in JSON at position 0

this is the API call
export const socialPostUpdateBio = (publicKey,sig,about)=>{
let data=
"pub="+ publicKey+
"&sig="+ sig.sig+
"&about="+about
console.log('====',data)
fetch('https://endpoint/postUpdateBio', {
method: 'POST',
headers: new Headers({
"Content-Type": "application/x-www-form-urlencoded", // <-- Specifying the Content-Type
Accept: "application/json"
}),
body:data
}).then((response) => response.json())
.then((responseJson) => {
console.log("New post updateBio",responseJson);
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}
this is data about:Its coming as a string not as a object
{name:"Guruprakash Gupta",dob:"14/08/1997",location:"Bangalore",bio:"Gratitude",sex:"Male",profile_pic:"QmdDjpQ3G6vg7zkU2BBPMQJYsnnRtTEDEtL9xBXjvPh4i4-image-jpg"}
before api call we have a one more function where we are signing the data with private key,so signing of data is correct here so i haven't inculded that function.
this is what response im getting
Response {type: "default", status: 524, ok: false, statusText: undefined, headers: Headers, …}type: "default"status: 524ok: falsestatusText: undefinedheaders: Headers {map: {…}}url: "https://murmurjapi.wandx.co/accounts/postUpdateBio"_bodyInit: Blobdata: (...)size: (...)type: (...)_data: {size: 4831, offset: 0, blobId: "d07d8515-51de-48c1-950d-7d9a77c8c640"}size: 4831offset: 0blobId: "d07d8515-51de-48c1-950d-7d9a77c8c640"__proto__: Object__proto__: Objectdata: (...)size: (...)type: (...)constructor: ƒ Blob()slice: ƒ slice(start, end)close: ƒ close()get data: ƒ ()set data: ƒ (data)get size: ƒ ()get type: ƒ ()__proto__: Object_bodyBlob: Blob {_data: {…}}__proto__: ObjectbodyUsed: false_initBody: ƒ (body)blob: ƒ ()arrayBuffer: ƒ ()text: ƒ ()formData: ƒ ()json: ƒ ()clone: ƒ ()constructor: ƒ Response(bodyInit, options)__proto__: Object

You're receiving HTML (or XML) back from the server, but response.json() telling XML or HTML to parse as JSON. Parser cannot parse XML or HTML, so it's showing this error. Check the "Network" tab in Chrome dev tools or postman client to see contents of the server's response.

Very basic React + NodeJS fetch: Why is my response not what I want?

Here's what I did on the react end:
componentDidMount(){
console.log('zzzzzzzzzzz')
fetch('http://localhost:5000/z', {mode: 'no-cors'}).then(res=>{console.log(res)
this.setState(res)})
}
Here's what I did with NodeJS + Express:
app.get('/z', (req, res)=>{
console.log('requested')
res.send({msg: "YEEEEHAW"})
})
The request does go through, but it's not what I wanted (the 'YEEEEHAW' is nowhere to be found in browser console):
Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}
type: "opaque"
url: ""
redirected: false
status: 0
ok: false
statusText: ""
headers: Headers
__proto__: Headers
body: (...)
bodyUsed: false
__proto__: Response
type: (...)
url: (...)
redirected: (...)
status: (...)
ok: (...)
statusText: (...)
.......
What did I do wrong here? How can I fix it? (To be clear, I did look through + expand every expandable field in the logged object so I'm pretty sure I didn't miss it)

To read response content, you can use res.json():
componentDidMount(){
console.log('zzzzzzzzzzz')
fetch('http://localhost:5000/z', {mode: 'no-cors'})
.then(res=>res.json())
.then(res=>{
console.log(res)
this.setState(res)
})
}

For return a json replace
res.send({msg: "YEEEEHAW"})
for
res.json({msg: "YEEEEHAW"})

Cache Storage API, can't get header back

I would like to a check for max-age so I remove items from cache when they get old, but I can't get my own header back for some reason.
export function cacheResponse(url, response) {
caches.open('my-cache').then(function(cache) {
cache.put(url, new Response(JSON.stringify(response), {
headers: {
'Cache-Control': 'max-age=1',
'Content-Type': 'application/json;charset=UTF-8'
}
}));
});
}
cacheResponse('/hello', {hello: "world"})
I can see this working in the Application tab in chrome and I can see those 2 headers in the preview, but when I pull the item back out the headers object is null.
cache.match(url).then(async function(object) {
console.log(object.headers) // null
var body = await object.clone().json(); // {hello: "world"}
})
The object looks like this
object: Response
body: ReadableStream
bodyUsed: false
headers: Headers
__proto__: Headers
ok: true
redirected: false
status: 200
statusText: ""
type: "default"
url: ""
Seems like I should be able to lookup the headers from calling match() no?

That should work; you should be able to call response.headers.get('cache-control') to retrieve the value (assuming this is a same-origin response).
Here's a snippet of code that I just tested which worked when run in the JS console:
async function test() {
const constructedResponse = new Response('test', {
headers: {'cache-control': 'max-age=1'}
});
const cache = await caches.open('test');
cache.put('/test', constructedResponse);
const matchedResponse = await cache.match('/test');
console.log(`cache-control: ${matchedResponse.headers.get('cache-control')}`);
}

Javascript not showing notification from GET springboot rest api

I am totally new to javascript . I just want to show a notification using notify.js when a button is clicked.
Following is my RestController code:
#RequestMapping(value = "/checkCurrentBranch" , method=RequestMethod.GET)
public String checkCurrectGitBranch(Model model, HttpServletResponse response) {
String branchName = "";
GitInfo gitInfo = new GitInfo();
JsonFactory factory = new JsonFactory();
String json = apiService.readGitProperties();
ObjectMapper mapper = new ObjectMapper(factory);
JsonNode rootNode;
try {
rootNode = mapper.readTree(json);
Iterator<Map.Entry<String, JsonNode>> fieldsIterator = rootNode.fields();
while (fieldsIterator.hasNext()) {
Map.Entry<String, JsonNode> field = fieldsIterator.next();
if (field.getKey().toString().equalsIgnoreCase("git.branch")) {
branchName = field.getValue().toString();
adminAppLogger.info("Current Branch name :: "+branchName);
}
}
} catch (IOException e) {
adminAppLogger.error("Error while getting current Git branch :" + e);
branchName = "Error while fetching branch name";
}
model.addAttribute("res", branchName);
return branchName;
}
Following is my js code:
$('#gitBranch').click(function(res) {
/* <![CDATA[ */
var path = /* [[#{/}]] */'checkCurrentBranch';
/* ]]> */
$.notify(res, "info");
console.log(res);
});
I think I am missing some points but I am stuck. Any suggestions?
I tried using axios following is my js:
$('#gitBranch').click(function(res) {
/* <![CDATA[ */
var path = /* [[#{/}]] */'checkCurrentBranch';
/* ]]> */
axios({
method:'get',
url:path,
responseType:'json'
})
.then(function (response) {
console.log(response)
$.notify(data,"info")
});
});
Following response I get on brwoser console. Now I just want that data field to be shown as notification :
{data: "qc_mediaworker_details", status: 200, statusText: "", headers: {…}, config: {…}, …}
config
:
{adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data
:
"qc_mediaworker_details"
headers
:
{pragma: "no-cache", date: "Sun, 04 Nov 2018 05:59:32 GMT", x-content-type-options: "nosniff", x-frame-options: "DENY", content-type: "application/json;charset=UTF-8", …}
request
:
XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status
:
200
statusText
:
""
__proto__
:
Object

You need to properly use data key in axios response block.
axios({
method:'get',
url:path,
responseType:'json'
})
.then(function (response) {
console.log(response)
$.notify(response.data,"info")
});
In above code, I replaced data by response.data
, because according your give code, data is not declared, that means its undefined. So if you mean data to that data which you get in axios response, then you need to access data by $.notify(response.data,"info") instead of $.notify(data,"info")

You don't have anywhere http request.
I recommend you using axios (because it's simple)
Sample code:
axios.get('host:port/checkCurrentBranch')
.then(response => {
// do what you want to do
})
.catch(error => {
// do something if an error occurs
})

Extracting data from a fetch() in Javascript

I have a simple fetch request like this:
fetch('/data', {method: 'POST', credentials: 'same-origin', body: {'name': 'alice'}}).then(function(response){
console.log('reply:');
console.log(response);
});
Basically it should send a POST request to the local address /data with some parameters in it (same thing as an HTML form does) and then return the reply it gets (the /data page simply prints out "this is a test response")
But when I look at the console.log(response); it looks like this:
Response { type: "basic", url: ".../data", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false }
The actual string returned by the page /data ("this is a test response") is nowhere to be found.
So how can I retrieve the actual returned string then?

To read the body of the response, you need to actually do that. See the details on MDN (here, here, and here), but in brief, if you want the body as text, then:
fetch(/*...*/)
.then(function(response) {
return response.text();
})
.then(function(responseText) {
// ...
});