Map array return key in a string format in JavaScript

Question

I have a function that map and create a new array from a given array. After I map the array to have a key: "value", but the map function return me the "key": "value".

How can I get or map the key not in a string format ?

let categories_name = [{ name: "test", prov_id: "f34f43"}, { name : "test1", prov_id: "233edd3"}]
  .map(v => v.prov_id)
  .filter((item, index, arr) => arr.indexOf(item) === index);

the result is this

["f34f43","233edd3"]

now I want to add a key (name) for each value and convert in a object

let newArray = categories_name.map(value => ({name: value}));

this is the result :

[ { "name": "f34f43" }, { "name": "233edd3" }]

but I need like that, with key not like a string.

[ { name: "f34f43" }, { name: "233edd3" }]

What you "need" and what you are getting are exactly the same. This seems like an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — Wais Kamal, Dec 12 '21 at 13:08
`{ "name": "f34f43" }` and `{ name: "f34f43" }` are identical. — VLAZ, Dec 12 '21 at 13:08
Why exactly would you need `name` instead of `"name"` in the first place? They're the same thing in a JS object — Jeremy Thille, Dec 12 '21 at 13:10
All keys in Javascript objects are strings. The language just allows the omission of the quotes when they not needed. `{ 'fun-key': 'f34f43' }` is fine for a object key if you require characters like hyphens — spirift, Dec 12 '21 at 13:12
there is no difference between those 2 things. You only need quotes when the key has strange characters inside. If you use JSON.stringify on your array they will be all quoted, and that is the only time when it really matters. — The Fool, Dec 12 '21 at 13:21
First of all, "name" and name as keys in object work exactly same way. 2nd why is that a problem in your usecase ? do you mind to share with us how this is a problem ? — millenion, Dec 12 '21 at 13:22
Everyone is right about the ES5 syntax equivalence of quoted and unquoted property names, but sometimes there are legit cases where one wants the "cleaner" ES5 syntax and not the default always quoted JSON syntax. For those cases, see [my answer](https://stackoverflow.com/a/70324092/8910547) — Inigo, Dec 12 '21 at 13:42
@Inigo The question is not about the string representation. It's about the actual object. You have to overwrite the `toString` method. — jabaa, Dec 12 '21 at 13:45
@jabaa That is incorrect. Read the title of the original question (before my edits) — Inigo, Dec 12 '21 at 13:47
@Inigo _"Map array return key in a string format in js"_ is the original title. OP didn't mention JSON or `JSON.parse` in the question. These tags were added by you after you gave an answer that doesn't answer the original question. — jabaa, Dec 12 '21 at 13:51
@Inigo The asker has decided and I rolled back your changes because it's not what the asker meant. — Thomas Sablik, Dec 12 '21 at 15:12

Audwin Oyong · Accepted Answer · 2021-12-12T13:30:51.950

4

In a JavaScript object, all keys are strings. So the followings are exactly the same/identical:

{ "key": "value" }
{ key: "value" }

// Hence your example is identical as well:
{ "name": "f34f43" }
{ name: "f34f43" }

edited Dec 12 '21 at 13:30

answered Dec 12 '21 at 13:22

Audwin Oyong

2,247
3
15
32

1

Thanks i realize that is Vue that convert the key to string , if i use in component, it work normally. Thanks! – Damac Dec 12 '21 at 14:22

score -1 · Answer 2 · answered Dec 12 '21 at 13:39

When you run the code below, you will see that even your original input has object properties in the form "key": "value" when printed:

let categories_name = [{ name: "test", prov_id: "f34f43"},{ name : "test1", prov_id: "233edd3"}]
console.log('source:', categories_name)


let ids = categories_name.map(v => v.prov_id)
  .filter((item, index, arr) => arr.indexOf(item) === index);
console.log('ids:', ids)


let newArray = categories_name.map(value => ({name: value}));
console.log('newArray:', newArray)

That's just the standard JSON representation, what you get if you used JSON.stringify.

If you really really need the string representation to look like ES5 syntax, see my answer to the above linked SO question. Per that answer, below I use JSON5.stringify from the JSON5 library, which has a compatible interface to the built-in JSON object:

// if node, import 'json5' here, as opposed to 
// the HTML script tag this example relies on

let categories_name = [{ name: "test", prov_id: "f34f43"},{ name : "test1", prov_id: "233edd3"}]
console.log('source:', JSON5.stringify(categories_name))


let ids = categories_name.map(v => v.prov_id)
  .filter((item, index, arr) => arr.indexOf(item) === index);
console.log('ids:', JSON5.stringify(ids))


let newArray = categories_name.map(value => ({name: value}));
console.log('newArray:', JSON5.stringify(newArray))

<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>

"*When you run the code below, you will see that even your original input has object properties in the form "key": "value" when printed:*" only in the console provided by StackSnippets. Consoles are free to represent objects as they wish - the Firefox console, for example, [does not show any quotes](https://i.stack.imgur.com/qt7Jt.png). There is no standard what should be shown in the console, nor is there any difference whether or not a key is shown quoted and which quotes are used to display it. — VLAZ, Dec 12 '21 at 14:25
@VLAZ it's funny that everyone is arguing with me. Even when I am agreeing with you, which is what this preface to my answer is doing.. Anyway, the asker is clearly talking about the serialized or printed format. And as you even suggest, some people or projects (e.g. Firefox) prefer the unquoted form. — Inigo, Dec 12 '21 at 14:55

Map array return key in a string format in JavaScript

2 Answers2