I'm new to using nextjs and Typescript and was wondering how can I access an object of an array which I'm already mapping through.

The main goal of this base64 function is to generate a BlurURLData for each picture so I can apply it on the next/image component because the pictures I want to apply this effect to need sometime to be loaded on the client side and they are animated, hence I could not apply the simple placeholder: "blur" //blur effect

Here is the object array:

const objectArrs = [
    {
        name: "titleOne",
        certImage: imageOne, // this is imported locally
        link: ";,
    },
    {
        name: "titleTwo",
        certImage: imageTwo, // this is imported locally
        link: ";,
    },
];

Here is the base64 function to generate the blurURLData:

try {
   const blurURLData = objectArrays.map(objectArray => (

       const image = {objectArray.certImage}; // I want to access the certImage from the array

       const buffer = await fetch(image).then(async (res) =>
           Buffer.from(await res.arrayBuffer())
       );

       const { base64 } = await getPlaiceholder(buffer);
    ));
} catch (error) {
    error;
}

Please note the naming of variables is just used for this example.

I'm new to using nextjs and Typescript and was wondering how can I access an object of an array which I'm already mapping through.

The main goal of this base64 function is to generate a BlurURLData for each picture so I can apply it on the next/image component because the pictures I want to apply this effect to need sometime to be loaded on the client side and they are animated, hence I could not apply the simple placeholder: "blur" //blur effect

Here is the object array:

const objectArrs = [
    {
        name: "titleOne",
        certImage: imageOne, // this is imported locally
        link: "https://linktowebsite",
    },
    {
        name: "titleTwo",
        certImage: imageTwo, // this is imported locally
        link: "https://linktowebsite",
    },
];

Here is the base64 function to generate the blurURLData:

try {
   const blurURLData = objectArrays.map(objectArray => (

       const image = {objectArray.certImage}; // I want to access the certImage from the array

       const buffer = await fetch(image).then(async (res) =>
           Buffer.from(await res.arrayBuffer())
       );

       const { base64 } = await getPlaiceholder(buffer);
    ));
} catch (error) {
    error;
}

Please note the naming of variables is just used for this example.

• typescript
• next.js
• base64
• next-images

Share Improve this question Follow edited Mar 22 at 15:39 AmineDev asked Mar 22 at 15:04 AmineDevAmineDev 2344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

Your current implementation has a few issues:

Syntax Error in map: The function inside .map() is not correctly structured. You need to use {} for a block and return the result explicitly.

Incorrectly Accessing certImage: The certImage property is already part of each object, so you don’t need to wrap it inside {} like const image = {objectArray.certImage};. Instead, just use const image = objectArray.certImage;.

Handling await in .map(): Since you're using await inside .map(), you should use Promise.all() to handle asynchronous operations properly.