How to map JSON data to object in forEach - vue.js

Question

I get a JSON Object as input in my function (pImageArray). I loop over this object, read data from a storage and get a new JSON object back (see image attached). Now and want to map one field "href" in a new object (data). I get the error "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')" I can not solve the issue. Any ideas? THX.

my code:

getFileForView: function (pImageArray) {

    const storage = new Storage(client);

    pImageArray.forEach(function (element) {

        const result = storage.getFileView(bucketID, element.image_ID);

        console.log("--- image for view in loop : ", result.href); // Success
        console.log("--- image result : ", result); // Success

        const data = result.map(value => ({

                href: value.href
         }));

         console.log("--- data : ", data); 

 });

the error:

getFileForView: function (pImageArray) {

    const storage = new Storage(client);

    var jsonData = [];

    var newJSONData = [];

    pImageArray.forEach(function (element) {

        const result = storage.getFileView(bucketID, element.image_ID);

        console.log("--- image for view in loop : ", result.href); // Success
        console.log("--- image result : ", JSON.stringify(result)); // Success

        jsonData["href"] = result.href;

        newJSONData.push(jsonData);

        console.log("--- data : ", newJSONData); 

 });

`result` doesn't even look like an Array, so even if it wasn't `undefined` it'd still not work ... I have a theory ... can you `console.log("--- image result : ", typeof result);` and share the result — Jaromanda X, Oct 24 '22 at 10:59
@Jaromanda it seems result is only a string ?! You are right, no JSON, sorry. How can i build a new array now ? — Ralf Bordé, Oct 24 '22 at 11:13
oh, if the result is a string, then it could be JSON - but that doesn't explain why `result` is `undefined` - perhaps your real code is different — Jaromanda X, Oct 24 '22 at 11:26
FYI, JSON stands for JavaScript Object Notation, it's merely a way of writing the data in a human readable format and is most often a string that can be parsed to language specific objects later on — Bowiemtl, Oct 24 '22 at 11:39
@Bowie te Loo. thanks for your note. I work a lot with JSON, I know the format, but sometimes I still mix up array and object ;) — Ralf Bordé, Oct 24 '22 at 11:46

score 0 · Answer 1 · answered Oct 31 '22 at 16:03

As this line indicates:

console.log("--- image result : ", result); // Success

result is a URL, rather than an Array, so it doesn't have a map function. Perhaps you're looking to do:

getFileForView: function (pImageArray) {

    const storage = new Storage(client);

    const data = pImageArray.map(function (element) {

        const result = storage.getFileView(bucketID, element.image_ID);

        console.log("--- image for view in loop : ", result.href); // Success
        console.log("--- image result : ", result); // Success

        return result.href;
    });

    console.log("--- data : ", data);

    return data;
}

How to map JSON data to object in forEach - vue.js

1 Answers1