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

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。

Answer 3

<script>
    var bread = {
      "@context": "",
      "@type": "BreadcrumbList",
      "itemListElement": []
    }
    $(document).ready(function () {
        var counter = 1;
        $('li[class*="breadcrumb-item"]').each(function(i,j){
         var href = $(this).find('a:first').attr('href');
         if (!href) href = location.href;
          bread.itemListElement.push({
            "@type": "ListItem",
            "position": counter,
            "item": href,
            "name": $.trim($(j).text())
          })
        counter++;
        });
        var jsonStr = JSON.stringify(bread);
        $('#dynamicJSONLD').append(jsonStr);
    });
</script>   
<script id="dynamicJSONLD" type="application/ld+json"></script>