An Easy Way to Convert Object to List of Name Value Pairs?

Question

Is there an easy way to convert an object to name value pairs like jquery generates with .serializeArray()

This doesn't work:

var data = {
    name: "John",
    age: 26,
    isMale: true,
    occupation: null
}

var serialized = $(data).serailizeArray();

Is there an easy way to do this without looking at every property and converting them to name-value pairs?

I'm using a helper function that is written by someone else that adds a name value pair to each call before posting it to the server. Obviously it's not working if I give it a regular object or an array that has a regular object.

JS has no concept of a 'list of name/value pairs' other than an object, so could you please give an exact example of the output you're attempting to create — Rory McCrossan, Nov 27 '18 at 17:26
@RoryMcCrossan `[{name: value},{age: value},{isMale: value},{occupation: value}]` — Kevin B, Nov 27 '18 at 17:27
https://stackoverflow.com/questions/36644438/how-to-convert-a-plain-object-into-an-es6-map — Katie.Sun, Nov 27 '18 at 17:27
@KevinB that's what I assumed, but you know what they say about assumptions :) — Rory McCrossan, Nov 27 '18 at 17:28
Don't have to assume, `like jquery generates with .serializeArray()` it's right there in the question — Kevin B, Nov 27 '18 at 17:29
That's not what `serializeArray()` does then. That would give you: `[{ name: "name", value: "John" }, ...]`. Hence my point about needing clarification — Rory McCrossan, Nov 27 '18 at 17:30
In my experience, any time you end up with an array of single key/pair values, you've probably designed the wrong data structure... — Alnitak, Nov 27 '18 at 17:33
@Alnitak but serializeArray() doesn't do that...it's keys are always `name` and `value` — charlietfl, Nov 27 '18 at 17:34
@Alnitak Mapping over an array of key, value pairs is less work than mapping over an array of object keys and accessing each property explicitly. — tex, Nov 27 '18 at 17:51
@Tex only if you're using `key: keyValue, value: actualValue` type objects - if the `key` has a different name in each of the objects you still have to enumerate the object to find that key. — Alnitak, Nov 27 '18 at 17:57
@Alnitak I'm talking about an array of `[key, value]` pairs such as that generated by `Object.entries()`, to be clear. — tex, Nov 27 '18 at 18:00
@Tex to be clear, I was talking about arrays like `[ {key1: value1}, {key2: value2}, ...]`. — Alnitak, Nov 27 '18 at 21:37

score 0 · Accepted Answer · answered Nov 27 '18 at 17:31

You can do this with a combination of Object.entries and map (assuming you want the data in the same format that serializeArray returns):

var data = {
  name: "John",
  age: 26,
  isMale: true,
  occupation: null
};

var result = Object.entries(data).map(([k, v]) => ({name: k, value: v}));
console.log(result);

tex · Answer 2 · 2018-11-27T17:55:03.590

-2

This should do the trick if you're using ES6:

var data = {
    name: "John",
    age: 26,
    isMale: true,
    occupation: null
}

console.log(
  Object.entries(data).map(([name, value]) => ({ name, value }))
)

// ES5:

console.log(
  Object.keys(data).map(function (name) { return { name: name, value: data[name] } })
)

edited Nov 27 '18 at 17:55

answered Nov 27 '18 at 17:31

tex

2,756
22
31

That is not same structure that serializeArray produces – charlietfl Nov 27 '18 at 17:36
@charlietfl looks like an exact match to me. – tex Nov 27 '18 at 17:42
@charlietfl Indeed. 'name, value pairs' reminded me of 'key, value pairs', which is what `Object.entries()` returns without processing. I glossed over the `serializeArray` part of the question and was unfamiliar with that method until looking it up just now. – tex Nov 27 '18 at 17:47

An Easy Way to Convert Object to List of Name Value Pairs?

2 Answers2