Question

我需要动态构建一个JSON。

JSON如果不是动态的，则可以使用。

这是一个可行的示例，但是"@id"和"name"不是动态的：

var el_2 = document.createElement('script');
el_2.type = 'application/ld+json';

el_2.text = JSON.stringify({
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/",
      "name": "Home",
    }
  }, {
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/text_1",
      "name": "Text_1",
    }
  }, {
    "@type": "ListItem",
    "position": 3,
    "item": {
      "name": "Text_2",
    }
  }
  }]
});

document.querySelector('head').appendChild(el_2);

我需要使其动态。

我使用jQuery’s each()函数遍历面包屑的每个元素。

然后，我将元素推入数组：

var array_breadcrumb_text = [];
$('.region-breadcrumb .breadcrumb li').each(function(index, value) {
  array_breadcrumb_text.push($(this).find("a").attr('href') + ' : ' + $(this).text());
  // output of links and text is  correct
  console.log(array_breadcrumb_text[index]);
});

我不知道如何使用此数组来构建JSON。

通常，我使用foreach循环，但是由于我在JSON.stringify()内部，所以我不能使用foreach循环，因为我有语法问题。

这是面包屑HTML结构

<ol class="breadcrumb">
          <li>
                  <a href="/">Home</a>
          </li>
          <li>
                  <a href="/text_1">Text_1</a>
          </li>
          <li class="active">
                  Text_2
          </li>
 </ol>

Answer 1

我终于获得了足够的信息，以意识到您可以做您想做的事情。

所以我想你想要这个：

var el_2 = document.createElement('script');
el_2.type = 'application/ld+json';
var bread = {
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": []
}

$('.breadcrumb li').each(function(index) {
  var item = {}
  var href = $(this).find("a").attr('href');
  if (href) item["@id"] = href // OR location.protocol+"//"+location.host+href;
  item["name"] = $.trim($(this).text()); 

  bread.itemListElement.push({
    "@type": "ListItem",
    "position": index + 1,
    item
  })
});

el_2.text = JSON.stringify(bread);
console.log(JSON.stringify(bread,null,2))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="breadcrumb">
  <li>
    <a href="/">Home</a>
  </li>
  <li>
    <a href="/text_1">Text_1</a>
  </li>
  <li class="active">
    Text_2
  </li>
</ol>

Answer 2

我会构建类似以下的功能

function createListItem(el, index) {
    var $el = $(el);
    var data = { 
        "@type": "ListItem",
        "position": index,
        "item": {}
    };

    data.item['@id'] = $el.find("a").attr('href');
    data.item.name = $el.text();
    // add image etc.

    return data;
}

这将构建数据结构的ListItem部分。您可以像这样构建它：

var array_breadcrumb_items = $('.region-breadcrumb .breadcrumb li').map(createListItem);

排序后，您可以：

var result = JSON.stringify({
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": array_breadcrumb_items
});

基本上，分解JSON结构最简单的方法是将其分解为可重复的部分，组装它们，然后将结果尽可能晚地通过JSON.stringify。

使用数组中存储的数据动态构建JSON

2 个答案: