代码之家 › 专栏 › 技术社区 › Sébastien Gicquel

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

each json arrays javascript

Sébastien Gicquel · 技术社区 · 8 年前

我需要建立一个 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() 我不能使用 前额 循环,因为我有语法问题。

这里是breadcrumb 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>

2 回复 | 直到 8 年前

mplungjan 8 年前

我终于得到了足够的信息,意识到你可以做你想做的事。

所以我假设你想要这个:

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>

Peter Mellett 8 年前

我将构建一个函数,比如:

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 越晚越好。