A better way to sort through mapped ipfs and non-ipfs images?

[engsbergp]

I'm mapping through a getNftsForOwner() function
The owner has files from arweave, ipfs, and pinata, and I only want to append the files that begin with "ipfs://"

In my mind this idea works very well lol, but I get a type error. Any suggestions?

{nftsDisplayed.map((metadata, index) => {
    const collection = metadata.contract.symbol
    const image = metadata.rawMetadata.image
    
    return (
        <>
            <div
                key={index}
                className="p-3 rounded-xl drop-shadow-l bg-slate-500"
            >
                <p>collection: {collection}</p>
                <img
                    width="100px"
                    height="100px"
                    src={
                        image.startsWith("ipfs://")
                            ? image.replace("ipfs://", "https://ipfs.io/ipfs/")
                            : image
                    }
                />
            </div>
        </>
    )
})}

[engsbergp]

Note, I'm using Alchemy instead of Moralis.
I can return images from a contract if they are all on IPFS (Patrick's logic from section 15 works great!)
It's when I start mixing the different sources that I get problems.

[engsbergp]

Here is a functional answer to the question I asked last week. Hope this helps if someone needs it in the future.

Again, I'm writing in typescript, and using Alchemy SDK.

I could keep refining this to filter and sort nfts based on mimetypes, and place them in appropriate containers.
It seems a little cumbersome for the time being. I wonder if there is an aggregator API or any NFT metadata-refactoring webhooks available on the graph.

return (
        <>
            {isLoading ? (
                // LOADING IMAGE
                <div
                    className="flex w-full h-full items-center justify-center"
                    style={{ color: "black" }}
                >
                    <p>FETCHING NFT COLLECTION...</p>
                </div>
            ) : (
                // Get NFTs for contract ...
                <div className="grid grid-cols-3 gap-5 px-3 max-h-full overflow-y-scroll">
                    {collectionNfts.map((metadata: any, index: number) => {
                        const collection: string = metadata.contract.symbol
                        const image: string = metadata.rawMetadata.image

                        return (
                            <div key={index} className="p-3 rounded-xl drop-shadow-l bg-slate-500">
                                <p>collection: {collection}</p>
                                <>
                                    {(() => {
                                        let truncatedImage
                                        //Must have an image to return an image. Prevents undefined mappings
                                        if (!image)
                                            return (      
                                                <>
                                                    <img
                                                        loading="lazy"
                                                        height="100px"
                                                        width="100px"
                                                        src={undefinedImage.src}
                                                    />
                                                </>
                                            )
                                        //Remove ipfs nested ipfs. Largest argument    
                                        else if (image.startsWith("ipfs://ipfs/")) {
                                            truncatedImage = image.replace(
                                                "ipfs://ipfs/",
                                                "https://ipfs.io/ipfs/"
                                            )
                                            return (
                                                <>
                                                    <img
                                                        loading="lazy"
                                                        height="100px"
                                                        width="100px"
                                                        src={truncatedImage}
                                                    />
                                                </>
                                            )
                                        // Remove ipfs. Arguments getting smaller
                                        } else if (image.startsWith("ipfs://")) {
                                            truncatedImage = image.replace(
                                                "ipfs://",
                                                "https://ipfs.io/ipfs/"
                                            )
                                            return (
                                                <>
                                                    <img
                                                        loading="lazy"
                                                        height="100px"
                                                        width="100px"
                                                        src={truncatedImage}
                                                    />
                                                </>
                                            )
                                        // No changes to anything already functional 
                                        } else if (image.startsWith("https://")) {
                                            return (
                                                <>
                                                    <img
                                                        loading="lazy"
                                                        height="100px"
                                                        width="100px"
                                                        src={image}
                                                    />
                                                </>
                                            )
                                        // Cleanup
                                        } else {
                                            return <>{undefinedImage}</>
                                        }
                                    })()}
                                </>
                                <NftCardMenuButton />
                            </div>
                        )
                    })}
                </div>
            )}
        </>
    )