How to format a javascript object to a JSON object for schema data?

Question

I have bellow mentioned of dynamic js object form which I try to convert it to Schema Data and add into head tag of the web page for SEO purpose. Not sure how it can be possible as I am new staff on this.

My JS Function:

function populateJsonLDScript(data) {
    if (typeof (data) != "undefined" && data  != null) {
        var finalSchemaObj = {};
        var tempSchemaItems = [];
        for (var i = 0; i < data.length; i++) {
            var tempSchemaData = {};
            tempSchemaData["@type"] = "ListItem";
            tempSchemaData["position"] = data[i].DisplayOrder;
            tempSchemaData["item"] = {
                "@id": data[i].CanonicalURL,
                "name": data[i].Name
            };
            tempSchemaItems.push(tempSchemaData);
        }

        for (var i = 0; i < tempSchemaItems.length; ++i) {
            finalSchemaObj[i] = tempSchemaItems[i];
        }

        var scriptSchema = document.createElement('script');
        scriptSchema.type = 'application/ld+json';
        scriptSchema.text = JSON.stringify({
            "@context": "http://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [finalSchemaObj]
        });
        if ($('head script[type="application/ld+json"]').length > 0) {
            $('head script[type="application/ld+json"]').remove();
            $("head").append(scriptSchema);
        } else {
            $("head").append(scriptSchema);
        }
    }
}

OUTPUT

{
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
        "0": {
            "@type": "ListItem",
            "position": 0,
            "item": {
                "@id": "http://example.com",
                "name": "Home"
            }
        },
        "1": {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "http://example.com/jewelry",
                "name": "Jewelry"
            }
        },
        "2": {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "http://example.com/jewelry/necklaces-pendants",
                "name": "Necklaces & Pendants"
            }
        }
    }]
}

But Still Google said its invalid format. So, I want to format the above to -

{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[
        {
            "@type":"ListItem",
             "position":0,
             "item": {
                       "@id":"http://example.com",
                       "name":"Home"
                     }
        },
        {
           "@type":"ListItem",
            "position":1,
            "item":{
                     "@id":"http://example.com/jewelry",
                     "name":"Jewelry"
                   }
        },
        {
           "@type":"ListItem",
           "position":2,
           "item":{
                   "@id":"http://example.com/jewelry/necklaces-pendants",
                   "name":"Necklaces & Pendants"
                }
        }
    ]
}

Anyone please help how to do this?

dfsq · Accepted Answer · 2018-05-16 09:51:18Z

Don't use object, use array and push into it. Something like this:

function populateJsonLDScript(data) {
  if (typeof(data) != "undefined" && data != null) {
    var finalSchemaObj = []; // <----- use array here
    var tempSchemaItems = [];
    for (var i = 0; i < data.length; i++) {
      var tempSchemaData = {};
      tempSchemaData["@type"] = "ListItem";
      tempSchemaData["position"] = data[i].DisplayOrder;
      tempSchemaData["item"] = {
        "@id": data[i].CanonicalURL,
        "name": data[i].Name
      };
      tempSchemaItems.push(tempSchemaData);
    }

    for (var i = 0; i < tempSchemaItems.length; ++i) {
      finalSchemaObj.push(tempSchemaItems[i]); // <--- push here
    }

    var scriptSchema = document.createElement('script');
    scriptSchema.type = 'application/ld+json';
    scriptSchema.text = JSON.stringify({
      "@context": "http://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": finalSchemaObj // <----- and use finalSchemaObj here
    });
    if ($('head script[type="application/ld+json"]').length > 0) {
      $('head script[type="application/ld+json"]').remove();
      $("head").append(scriptSchema);
    } else {
      $("head").append(scriptSchema);
    }
  }
}

Collectives™ on Stack Overflow

How to format a javascript object to a JSON object for schema data?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related