Uncaught TypeError: {(intermediate value)}.map is not a function"

July 27, 2023

Actual code:

const genreOptions = [{{ genreOptions | json_encode | raw }}].map((type , label) => ({value: type, label: label}));

Debugging code:

            const genreOptions = {
                "Horror": "Korku",
                "Comedy": "Komedi\u0103 Filmi",
                "Action": "Aksiyon",
                "Drama": "Drama"
            }.map((type,label)=>({
                value: type,
                label: label
            }));

Im getting the following error from above code:

Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)(intermediate value)}.map is not a function"

Array Dump from Backend Now:

array:4 [▼
  "Horror" => "Korku"
  "Comedy" => "Komedi\u0103 Filmi"
  "Action" => "Aksiyon"
  "Drama" => "Drama"
]

Array Dump Backend Before Modification:

array:4 [▼
  0 => "Horror"
  1 => "Comedy"
  2 => "Action"
  3 => "Drama"
]

We are trying now to translate the website and therefore I put the actual Words as keys in array instead of 0,1,2,3… and then the translations.

But we’re getting ".map is not a function error […]" .map() is used only on arrays and we’re surprised why the new version isn’t well received as array.

I added Square brackets [] and the error was gone but the result was not as we’ve had expected it.

I would like Comedy to be assigned to "value" and Korku to "label".

>Solution :

genreOptions is an object with key/value, you could use Object.entries then map to get the expected output :

const genreOptions = Object.entries({
        "Horror": "Korku",
        "Comedy": "Komedi\u0103 Filmi",
        "Action": "Aksiyon",
        "Drama": "Drama"
    }).map(
    ([type, label])=>({ 
        value: type,
        label: label
    })
)