Build a JSON dynamically with data stored in an array

Question

I need to build a JSON dynamically.

The JSON works if it is not dynamic.

Here is a working example but the "@id" and "name"are not dynamic :

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

I need to make it dynamic.

I use jQuery’s each() function to loop through each element of the breadcrumb.

Then, I push the element into an array:

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

I don’t know how to use this array in order to build the JSON.

Generally, I use a foreach loop but since I am inside of the JSON.stringify(), I can't use a foreach loop, because I have a syntax issue.

Here is the breadcrumb HTML structure

<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>

mplungjan · Accepted Answer · 2018-09-25 15:29:45Z

3

I finally got enough information to realise you CAN do what you are trying to do.

So I assume you want this:

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>

edited Sep 25, 2018 at 15:29

answered Sep 25, 2018 at 9:54

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sébastien Gicquel Over a year ago

I've checked the JSON inside <script type="application/ld+json"></script> and it perfectly matches the example in my question. That's why I upvote and mark as correct your answer. But it doesn't pass Google test tools. If I copy paste the JSON code outputted by your code in <head> and remove the JS, it passes the Google test tools. I've spent a few hours on this and I don't understand for now. I used the same principle to generate the JSON for my local pages and in this case it passes the Google test tools. Need to check again everything. I'll get back to you when I'll found a solution.

Sébastien Gicquel Over a year ago

The only thing I found for now, if I comment //item in bread.itemListElement.push({});I can see in Google test tools all structured datas for locale pages, logo, breadcrumb, social profile. Of course, there are errors for breadcrumb (item is missing) but Google found the datas.

mplungjan Over a year ago

Try the update - perhaps the @ID MUST be before name

Sébastien Gicquel Over a year ago

I've already tried this but I will try again (need to double check ;-)

Sébastien Gicquel Over a year ago

I've spent a few hours on this issue and even if your code is correct, it doesn't pass structured data google testing tool (search.google.com/structured-data/testing-tool/u/0). My conclusion for now is we can't use an object (item in your code). Even if I use item outside of the each() and if I assign a simple value without iterate over the DOM elements, it doesn't work. It works for my local pages because I only use variables and not object. Need to find an alternative, create this on server side I guess.

Peter Mellett · Accepted Answer · 2018-09-25 08:48:58Z

I would build out a function something like:

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

This builds out the ListItem parts of your data structure. You can build it like:

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

Once that's sorted you can:

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

Essentially the easiest way to break up a JSON structure is to break it down into the repeatable parts, assemble them and then pass the result through the JSON.stringify as late as possible.

Toni · Accepted Answer · 2021-10-20 10:47:11Z

0

<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>

edited Oct 20, 2021 at 10:47

Toni

1,6435 gold badges21 silver badges27 bronze badges

answered Oct 19, 2021 at 18:08

user17194774

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Build a JSON dynamically with data stored in an array

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related