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

Question

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".

That's not an array. Arrays have implicit keys (0, 1, 2, ...), and `.map()` is an Array method. — Pointy, Jul 27 '23 at 14:11
Isnt it an associated array? I added [] around then the error was gone but it didnt work as I expected... any hints to make it work? — Anarkie, Jul 27 '23 at 14:18
you're talking about a Map or Dictionary. There is only one type of [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) in JavaScript. As the second bullet point states "JavaScript arrays are not associative arrays" — yoduh, Jul 27 '23 at 14:22
Okay so previously it was an array but after the keys modification it became an Object(dictionary). How can I use its components and assign values? — Anarkie, Jul 27 '23 at 14:24
@Anarkie It's called an associative array in PHP. In JS, arrays are lists (numeric sequential indexes) and what's called "associative arrays" in PHP are just objects in JS. — M. Eriksson, Jul 27 '23 at 14:24
There are many ways to iterate an Object in JS. [Here](https://stackoverflow.com/a/14810722/6225326) is a pretty good answer going over multiple methods — yoduh, Jul 27 '23 at 14:25

score 0 · Accepted Answer · edited Jul 27 '23 at 14:28

0

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
    })
)

edited Jul 27 '23 at 14:28

hakre

193,403
52
435
836

answered Jul 27 '23 at 14:23

Boussadjra Brahim

82,684
19
144
164

1

You deserve a medal sir! – Anarkie Jul 27 '23 at 14:27
@hakre why is it wrong? – Anarkie Jul 27 '23 at 14:28
@Anarkie: Not why, but only for which part; see the last edit. – hakre Jul 27 '23 at 14:28

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

1 Answers1