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)

[paradoxloop]

Zod v4 now has an inbuilt z.json() type.

[alexgleason]

Very good, but it doesn't actually parse from a string.

[codyfrisch]

@alexgleason I was about to say the same. It just validates if something can be serialized with JSON.stringify() (and I suspect has many edge cases that would pass but not serialize nicely)

[AustinShelby]

With zod 4 it's possible to use .pipe() with .preprocess() and .json() for a really elegant solution.

const jsonString = z.string().pipe(
  z.preprocess((input, ctx) => {
    try {
      return JSON.parse(input);
    } catch (_) {
      ctx.issues.push({ code: "custom", message: "Invalid JSON", input });
      return z.NEVER;
    }
  }, z.json()),
);

jsonString.parse('{"omega":"kappa","number":42}');

If you expect your json to be in a particular format, you can replace the .json() with your preferred validator like so:

const validator = z.object({
  omega: z.string(),
  number: z.number(),
});

const jsonString = z.string().pipe(
  z.preprocess((input, ctx) => {
    try {
      return JSON.parse(input);
    } catch (_) {
      ctx.issues.push({ code: "custom", message: "Invalid JSON", input });
      return z.NEVER;
    }
  }, validator),
);

jsonString.parse('{"omega":"kappa","number":42}');

[codyfrisch]

I see little value in doing string then piping to preprocess when you can just do transform and pipe to your schema. What is the benefit?

import { type ZodType, z } from "zod";

export const parseJson = <T extends ZodType>(schema: T) =>
  z
    .string()
    .transform((str, ctx) => {
      try {
        return JSON.parse(str);
      } catch (error) {
        ctx.addIssue({
          code: "custom",
          message: `Invalid JSON - ${(error as Error).message}`,
          fatal: true,
        });
      }
    })
    .pipe(schema);

export const stringifyJson = <TInputSchema extends ZodType>(
  inputSchema: TInputSchema,
) => {
  return inputSchema.transform((s) => JSON.stringify(s));
};

[AustinShelby]

According to the documentation https://zod.dev/api#preprocess .preprocess() is just a convenience function that combines .transform() and piping the result into another schema. So basically the exact same what you are doing.