Fetching JSON-file from ipfs and parsing/displaying on a webpage (using 'ipfs-core')

Help Coding
1 
import * as IPFS from 'ipfs-core'

var ipfs = await IPFS.create({ repo: 'ok' + Math.random() })

const metadataMap = new Map()

//content.metadataCid is the ipfs-cid of the metadata.json file stored on ipfs.
var res = await ipfs.cat(content.metadataCid)
//var data = await res.Json()

console.log("** Metadata from Cid **")
console.log(res)

//This just maps the content (content-cid) to its metadata
//sets the metadata for each Content
 metadataMap.set(theCid, res)

 if (metadataMap) {
 console.log('**metadata map**')
 console.log(metadataMap)
 }

The console -

Screenshot 2022-02-09 141842
Screenshot 2022-02-09 1418422531Ă—831 137 KB

I am hosting those metadata files on pinata as well as on my desktop-ipfs. And you can access it using ipfs cli or gateways. eg_link:
https://ipfs.io/ipfs/bafybeibro7fxpk7sk2nfvslumxraol437ug35qz4xx2p7ygjctunb2wi3i/

The link opens in the browser using ipfs-gateway just fine:

Screenshot 2022-02-09 143225
Screenshot 2022-02-09 1432252543Ă—564 27.1 KB

But when I use ipfs.cat() , the console just shows cat {suspended} (as shown in the image attached)]

I can access the image stored on ipfs using “img” tag without any problem:

Screenshot 2022-02-09 142751
Screenshot 2022-02-09 1427511246Ă—530 201 KB

In the image above, the images are from ipfs. I also wanna show title and description which is stored in that json file on ipfs

Same issue with ipfs.get() !

How can I access that metadata.json file and parse them. Am I missing any step here?

thanks :crossed_fingers:

2

That cid doesn’t resolve for me (I tried my own node, ipfs.io, gateway.pinata.cloud and cf-ipfs.com), so, I think your hosting is the problem, not your code.

Update: my node finally found it after searching for over 30 mins. Once my node had it in its cache, the other places resolved it in seconds. So, I stand by: your hosting isn’t working very well, for some reason

3

hey thanks for the reply!

this particular link - “https://ipfs.io/ipfs/bafybeibro7fxpk7sk2nfvslumxraol437ug35qz4xx2p7ygjctunb2wi3i/” was just hosted on my local node so you must have gotten it when my node was up, my bad! but its added on pinata now along with other metadata files.

It doesn’t resolve the issue though, coz even if the file is in my local node/cache, it just shows the same message on console.

Can you link me to some examples on how to fetch/parse nft-metadatas stored on ipfs on the frontend.

Edit: I’ve also added how I am able to load the images stored on ipfs with no problem, but cannot get those JSON-files.

4

Hey had the same issue a while back.

Here are some resources I used to find the answer

In general if you have json uploaded at a certain CID, you can use the following to retrieve it in JSON format:

// In the imports

import {concat} from 'uint8arrays'
import * as IPFS from 'ipfs-core'

// In the method, assuming you already have created an IPFS instance (await IPFS.create() etc)

for await (const chunk of ipfs.cat(CID)) {
     chunks.push(chunk);
}

const data = concat(chunks)
const decodedData = JSON.parse(new TextDecoder().decode(data).toString());

So the decodedData will be your retrieved JSON object.
Apart from the ipfs-core library, you would have to install uint8arrays which you can find here

Best of luck!