Построить JSON динамически с данными, хранящимися в массиве - PullRequest
Новая
       9

Построить JSON динамически с данными, хранящимися в массиве

0 голосов
/ 25 сентября 2018

Мне нужно построить 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>

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Я наконец получил достаточно информации, чтобы понять, что вы МОЖЕТЕ делать то, что вы пытаетесь сделать.

Итак, я предполагаю, что вы хотите это: 

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>
0 голосов
/ 25 сентября 2018

Я бы построил функцию примерно так: 

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 как можно позже.

...