javascript - 如何将 javascript 对象格式化为模式数据的 JSON 对象？

Question

我在下面提到了动态 js 对象形式，我尝试将其转换为模式数据并添加到网页的 head 标记中以用于 SEO 目的。 不确定这怎么可能，因为我是这方面的新员工。

我的 JS 函数:

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);
        }
    }
}

输出

{
    "@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"
            }
        }
    }]
}

但是谷歌仍然说它的格式无效。所以，我想将上面的格式格式化为 -

{"@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"
                }
        }
    ]
}

有人请帮忙如何做到这一点？

Answer 1

不要使用对象，使用数组并压入其中。像这样:

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);
    }
  }
}