That theory is sound. What’s stopping you from reference the vairant metafield and adding that to your js object? Are you just stuck on how to reference the metafield or something else?
Sometimes the theme (if you’re using an existing one) might already had made a js object of the product. In that case there’s less value to add another so I usually just make a standalone metafields object with whatever context i need - making sure the property keys are something that will match the variant.
Be mindful of using the json filter though - you’re already wrapping the liquid in quotes but the filter will also add it’s own when needed (eg, if a string var the value will be in quotes so you’ll double up). Just check the source of your output and you’ll see what I mean.