How to combine multiple structured data into one script tag (ASP.NET, JS)

Question

I have multiple JSON-LD markups that are generated by different components on a webpage. These components load at different times. I want to combine these JSON-LD markups into a single tag once all the components have finished loading.

For example, on the product category page I have

Webpage component

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      ...
    }
</script>

Breadcrumb component

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      ...
    }
</script>

Category component

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "CollectionPage",
      ...
    }
</script>

Then, I want to combine them into a script tag with nested data struture like below

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Website",
  "name": "Your E-Commerce Website Name",
  ..............
  },

  "mainEntity": {
    "@type": "WebPage",
    "name": "Your E-Commerce Start Page Name",
    ................................
    },

    "breadcrumb": {
      "@type": "BreadcrumbList",
      .................................
    },

    "mainEntityOfPage": {
      "@type": "CollectionPage",
      "name": "Your Collection Page Name",
      ................
      }
    }
}   

Is there anyone know how to do that with javascript or asp.net?

Solution how to solve my problem

Answer 1

What you need to do is reference the different schemas in their relationship.

For that to happen properly, you need to give each element an "@Id" attribute. That "@Id" attribute does not need to be world global, but local to the page.

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "@id": "https://example.com/#webpage",
      "name": "My Web Site"
    }
</script>
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "@id": "https://example.com/foo.html#webpage",
      "name": "My Web Page"
    }
</script>
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "@id": "https://example.com/foo.html#breadcrumb",
      "name": "My Breadcrumb List"
    }
</script>
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "CollectionPage",
      "@id": "https://example.com/foo.html#collectionpage",
      "name": "My Collection Page"
    }
</script>

For example, the WebPage "is part of" the Website

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "@id": "https://example.com/foo.html#webpage",
      "isPartOf": {
          "@type": "WebSite",
          "@id": "https://example.com/#website"
      }
    }
</script>

As you can see, the last script can be independent of the others and add the "isPartOf" attribute to the WebPage, by referencing it by its "@id" and the WebSite as well by its "@id"