adding required Schema.org JSON LD Markup

Question

I would like to see if somebody could post an example of how to dynamically create a JSON-LD to create a google rich card using JQuery? I would really appreciate if somebody could show me an example of how to implement this.

    <script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://www.avenue.com/",
      "name": "Home",
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://www.avenue.com/en_US/plus-size-clothing/dresses/",
      "name": "Plus Size Dresses",
    }
  }]
}
</script>

Answer 1

You should not create it with jQuery. You should put it in isml templates, following this example:

<script type="application/ld+json">
    <isprint value="${JSON.stringify(ldJSON)}" encoding="off"/>
</script>

or if you wish to hardcode structure:

<script type="application/ld+json">
    {
        "@context": "${context}",
        "@type": "${type}",
        "url": "<isprint value="${varURL}" />",
        "potentialAction": {
            "@type": "${searchType}",
            "target": "<isprint value="${theTarget}" />{search_term_string}",
            "query-input": "required name=search_term_string"
        }
    }
</script>