[SOLVED] Error of json.parse error with fetchNFTMetadata

Moralis General
#1

I can’t find the reason of the error and proceed to the next step of https://www.youtube.com/watch?v=tBMk1iZa85Y.

unction fetchNFTMetadata(NFTs){
let promises = [];
for (let i =0; i < NFTs.length; i++) {
let nft = NFTs[i];
let id = nft.token_id;

    //Call Moralis Cloud function -> static JSON File
    promises.push(fetch("https://XXXXXXX.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=XXXXXXXXXXXXX&nftId="+ id)
    .then(res => res.json()) 
    .then(res => JSON.parse(res.result))
    .then(res => {nft.metadata = res})
    .then( () => {return nft;}))
}


return Promise.all(promises);

}

I saw the error message below
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
fetchNFTMetadata http://127.0.0.1:5501/main.js:14
promise callbackfetchNFTMetadata http://127.0.0.1:5501/main.js:14
initializeApp http://127.0.0.1:5501/main.js:54
async http://127.0.0.1:5501/main.js:60
main.js:14:27

When I remove " .then(res => JSON.parse(res.result))", I could see the result with “undefined”
What is the reason of error? I can’t proceed it any more for a week!

#2

did you add that getNFT function in cloud code?
does that link work fine if you paste it in the browser?

#3

Yes,it worked well. I found the link in the log of Moralis admin dashboard and executed it in my firefox browser.

#4

How did you find that link in the admin log? Isn’t that code run in the browser?

#5

I misunderstood the url of log in dashboard of moralis admin as the url of code.
https://yfuvhn0tsc68.usemoralis.com/0000000000000000000000000000000000000000000000000000000000000000.json

The url above worked well. But the url you mentioned, doesn’t seem to work fine.
https://yfuvhn0tsc68.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=l5S4XpRGQpzStfYWBL5vVWBo0ovp8vvmFvgD3iIx&nftId=0

#6

Ok, you can add some logging in that cloud code function to see what happens

#7

How can I add logging in that code?
I wrote the code below but I can’t see the reason.

function fetchNFTMetadata(NFTs){
let promises = [];
try {
for (let i =0; i < NFTs.length; i++) {
let nft = NFTs[i];
let id = nft.token_id;

          //Call Moralis Cloud function -> static JSON File
          promises.push(fetch("https://yfuvhn0tsc68.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=l5S4XpRGQpzStfYWBL5vVWBo0ovp8vvmFvgD3iIx&nftId="+ id)
          .then(res => res.json()) 
          .then(res => JSON.parse(res.result))
          .then(res => {nft.metadata = res})
          .then( () => {return nft;}))
        }
    } catch (error) {
      console.log(error);
      alert(error);

}

#8

I mean in that cloud code function with logger.info

#10

I don’t know from that output what is the error. You can add specific log messages to see what happens.

#11

I could see the detail in the log of dashboard:
But I don’t understand what is the problem. getNFT doesn’t seem to get the result with undefined message. I can’t proceed any more

2022-03-05T12:18:03.211Z - httpResponse.text:{
“image”: “https://yfuvhn0tsc68.usemoralis.com/avp.jpg”,
“description”: “The artwork of a solidity developer test 2”,
“name”: “Heungsu’s avp”,
“external_url”: “https://www.primevideo.com/detail/Alien-vs-Predator/0TADOEPXDZTZSARG963ZB6QSMZ?_encoding=UTF8&language=ko_KR”

}
2022-03-05T12:18:03.207Z - httpResponse.text:{
“image”: “https://yfuvhn0tsc68.usemoralis.com//redsphere.jpg”,
“description”: “The artwork of a solidity developer test”,
“name”: “Heungsu’s red sphere”

}
2022-03-05T12:18:03.168Z - Ran cloud function getNFT for user undefined with:
Input: {"_ApplicationId":“l5S4XpRGQpzStfYWBL5vVWBo0ovp8vvmFvgD3iIx”,“nftId”:“0”}
Result: undefined

#12

Did you return something in that cloud function?

#13

No I didn’t get any result. But I could see the nft id and metadata in the log of dashboard.
I could see the nft.token_id :0,1
I think the code has problem below :

promises.push(fetch(“https://yfuvhn0tsc68.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=l5S4XpRGQpzStfYWBL5vVWBo0ovp8vvmFvgD3iIx&nftId=”+ id)
.then(res => res.json())
.then(res => JSON.parse(res.result))
.then(res => {nft.metadata = res})
.then( () => {return nft;}))

function fetchNFTMetadata(NFTs){
let promises = [];
try {
for (let i =0; i < NFTs.length; i++) {
let nft = NFTs[i];
let id = nft.token_id;
//Call Moralis Cloud function -> static JSON File
promises.push(fetch(“https://yfuvhn0tsc68.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=l5S4XpRGQpzStfYWBL5vVWBo0ovp8vvmFvgD3iIx&nftId=”+ id)
.then(res => res.json())
.then(res => JSON.parse(res.result))
.then(res => {nft.metadata = res})
.then( () => {return nft;}))
}
} catch (error) {
console.log(error);
alert(error);
}

#14

I mean, in the code for your cloud function, did you return something?

#15

Thank you for your help!
I found an workaround by modifying some codes below:

function fetchNFTMetadata(NFTs){
let promises = [];

for (let i =0; i < NFTs.length; i++) {
    let nft = NFTs[i];
    let id =  nft.token_id;

    //Call Moralis Cloud function -> static JSON File
    promises.push(fetch("https://xxxxxx.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=xxxxxxxxxxxxx&nftId="+ id)
    .then(res => res.json()) 
    .then(res => JSON.parse(nft.metadata))//JSON.parse(res.result))  
    .then(res => {nft.metadata = res})
    .then( () => {return nft;}))

}

I modified the code “JSON.parse(res.result)) " with “.JSON.parse(nft.metadata))”;
And I found the cloud function worked well by watching the logs of Moralis admin dashboard.
I added logging to the cloud function below
Moralis.Cloud.define(“getNFT”, async (request) => {
const logger = Moralis.Cloud.getLogger()
logger.info(”--------------------------------test 2022-03-06 16:27 after -------------------------------------------:");
let NFTId = request.params.nftId;
let hexId = parseInt(NFTId).toString(16);
let paddedHex = (“0000000000000000000000000000000000000000000000000000000000000000” + hexId).slice(-64);

Moralis.Cloud.httpRequest({url: "https://xxxxxxx.usemoralis.com/" + paddedHex  + ".json"}).then(function(httpResponse){
  logger.info("httpResponse.text: here is the result!!  "+ httpResponse.text ); 
  return httpResponse.text;
})

})
And I saw the httpResponse.text : There I could see the my NFT metadata .

#16

I don’t think that is the reason, that is an error that you see because the browser tries to get that favicon.

can you show how your cloud function looks like? you may need to add a return somewhere in that code so that the function returns something and not undefined

#17

I added my reply above :slight_smile:

1 Like