Parsing a JSON string with zod

[alexgleason]

I'm tired of writing the same try-catch code over and over again to parse JSON strings, and would love to parse it with something zod-like so it fits with the rest of my code. This is what I've come up with so far:

const jsonSchema = z.string().refine((value) => {
  try {
    JSON.parse(value);
    return true;
  } catch (_) {
    return false;
  }
}).transform((value) => JSON.parse(value));

Now I can do this:

jsonSchema.parse('{"hello": "world"}') // {hello: "world"}
jsonSchema.safeParse('}') // {success: false, error: ZodError[...]}
jsonSchema.parse('}') // throws ZodError

This works great, awesome! But is there a way I can avoid calling JSON.parse twice?

[JacobWeisenburger]

https://github.com/JacobWeisenburger/zod_utilz#stringtojson

[alexgleason]

Brilliant, I had no idea you could do that: https://github.com/JacobWeisenburger/zod_utilz/blob/4093595e5a6d95770872598ba3bc405d4e9c963b/src/stringToJSON.ts#LL4-L12C8

const stringToJSONSchema = z.string()
    .transform( ( str, ctx ): z.infer<ReturnType<typeof json>> => {
        try {
            return JSON.parse( str )
        } catch ( e ) {
            ctx.addIssue( { code: 'custom', message: 'Invalid JSON' } )
            return z.NEVER
        }
    } )

Thank you as always!

[SpencerDuball]

To add to this, another helpful snippet is using the .pipe function after parsing your JSON with this method. If you have an object schema you wish to parse/validate from a JSON string you could do:

const ZSearch = z.object({
  client_id: z.string(),
  redirect_uri: z.string(),
  scope: z.string(),
  state: stringToJSONSchema.pipe(z.object({ id: z.string(), redirect_uri: z.string() })),
});
const ZFormData = z.object({ search: stringToJSONSchema.pipe(ZSearch), user_id: z.coerce.number() });

This example shows how you could validate two objects that may contain nested JSON strings. The string value is parsed to be valid JSON first using stringToJSONSchema and then we can pipe this into a second Zod check that examines if this new object matches some schema that we have defined.

https://zod.dev/?id=pipe

[HHogg]

Just adding an alternative method of using preprocess.

const parseJsonPreprocessor = (value: any, ctx: z.RefinementCtx) => {
  if (typeof value === 'string') {
    try {
      return JSON.parse(value);
    } catch (e) {
      ctx.addIssue({
        code: ZodIssueCode.custom,
        message: (e as Error).message,
      });
    }
  }

  return value;
};

This can then be reused in multiple schemas like..

const someObjectShapeSchema = z.object({
   foo: 'bar',
});

const someObjectSchema = z.preprocess(parseJsonPreprocessor, someObjectShapeSchema);

// Use as you normally would
someObjectSchema.parse('{"foo":"bar"}'); // { foo: 'bar' }

[codyfrisch]

I took this a step farther and created a function that takes the someObjectSchema, and returns the preprocessor with the parseJsonPreparser code in it. Now I have a reusable function to parse with that just needs the someObjectSchema supplied to it, and then .parse(object) on that function.

jsonParser(someObjectSchema).parse(objectToParse)