Renaming JSON field using JSON.parse

Question

Say we have this JSON string:

const v = `{"foo":"bar"}`;

is there a way to configure parsing with JSON.parse so that a field gets renamed, for example capitalizing the field name:

const parsed = JSON.parse(v, captitalize);
console.log(parsed);  // => {Foo: "bar"}

or some way to transform the field names, depending on which field you are working with?

You only capitalized the first letter of the Key... presuming that by field you mean Key. — LuisTavares
– LuisTavares, Commented Nov 21, 2018 at 7:48
@vibhor1997a well using JSON libs in other languages, you can choose which source fields get parsed into which destination fields, there's more control. Capitalization was just an example, but I am looking for more configurability to turn the string into an object. — Alexander Mills
– Alexander Mills, Commented Nov 21, 2018 at 7:48
From MDN "If a reviver is specified, the value computed by parsing is transformed before being returned. " - So that's what you were referring to I presume, but this only effects the value and not the key, and You're asking about the key. — Neil Lunn
– Neil Lunn, Commented Nov 21, 2018 at 7:52

T.J. Crowder · Accepted Answer · 2021-02-10 13:45:34Z

5

You can use the reviver parameter to JSON.parse to modify objects as they're revived:

const v = `{"foo":"bar"}`;
const result = JSON.parse(v, (name, value) => {
  if (value && typeof value === "object" && !Array.isArray(value)) {
    // It's a non-null, non-array object, create a replacement with the keys initially-capped
    const newValue = {};
    for (const key in value) {
      newValue[key.charAt(0).toUpperCase() + key.slice(1)] = value[key];
    }
    return newValue;
  }
  return value;
});
console.log(result);

edited Feb 10, 2021 at 13:45

answered Nov 21, 2018 at 7:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alexander Mills Over a year ago

I think you mean *as they're received?

Alexander Mills Over a year ago

Oh maybe you did mean revived lulz

vibhor1997a Over a year ago

Can you please add more about how this works and how reviver works in general? By reading MDN docs for reviver I thought it wasn't possible too change the key.

T.J. Crowder Over a year ago

@vibhor1997a - Did you review the code and the comments in it? You can't (sadly) change the key before hte object is created, but you can replace that object afterward with updated keys (which is what the above does).

jmsu Over a year ago

Thanks for this, this works great except for arrays. When value is an array it should be returned unmodified.

Gilad Bar · Accepted Answer · 2018-11-21 08:09:59Z

2

You can do the following:

// Better use try-catch here
const parsedV = JSON.parse(v);
const parsed = Object.keys(parsedV).reduce((acc, key) => {
    acc[capitalize(key)] = parsedV[key];
    return acc;
}, {});

edited Nov 21, 2018 at 8:09

answered Nov 21, 2018 at 7:46

Gilad Bar

1,3428 silver badges17 bronze badges

4 Comments

vibhor1997a Over a year ago

Object.keys(JSON.parse(v)) instead of Object.keys(v)?

Gilad Bar Over a year ago

Yeah sorry, I thought v was an object, I'll update my comment

T.J. Crowder Over a year ago

"No, but..." Actually, you can, with a reviver.

Gilad Bar Over a year ago

@T.J.Crowder Wow, I didn't know that. Good to know!

Collectives™ on Stack Overflow

Renaming JSON field using JSON.parse

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related