Добавление HTML + RDFa с помощью JavaScript - PullRequest
Новая
       49

Добавление HTML + RDFa с помощью JavaScript

0 голосов
/ 08 декабря 2018

Мой JavaScript-скрипт не позволяет семантически размечаться.Как вы можете видеть в моем скрипте ниже, я использую Schema.org и RDFa.

Проблема в том, что когда я проверяю свою страницу, проверяется только часть, предшествующая функции append.Это означает, что подходит только тип, заголовок, издатель и дата публикации.

Как это исправить?Я подозреваю, что проблема здесь заключается в функции append.

$(document).ready(function(){
                        $.getJSON(webhose_request, function(results){ //send request to API and store results in "results"
                            //parse the results' from the JSON response and display them //in a div element for example <div class='webhoseapi'></div>
                            //we can loop to display all results in a for loop or using the results.posts.lenght; or just display a few.

                            for (var i = 0; i < 10; i++) {
                                // you need to read the JSON results to know how to parse them, for example here results.posts[i].text
                             var articletext = results.posts[i].text;
                              // we use regular expressions REGEX to replace any new line '\n' and carriage return '\r' with html breaks </br>
                              articletext = articletext.replace(/(?:\r\n|\r|\n)/g, '</br>');
                                $(".webhose").append('<div vocab="http://schema.org/" typeOf="Article"><div property="headline" class="whtitel">'+results.posts[i].thread.title_full.substring(0,110)+'</div><div class="source"><b>Source:</b><span property="publisher"> '+results.posts[i].thread.site+'</span></div></div>');
                                if(results.posts[i].thread.author){
                                    $(".webhose").append('<div class="whpublished"><b>By:</b> <span property ="author">'+results.posts[i].thread.author+'</span></div>');
                                }
                                $(".webhose").append('<div class="whpublished"><b>Date published:</b><em><span property="datePublished"> '+results.posts[i].thread.published.substring(0,10)+'</p></span></em> </div>');
                                //we check if there is an image for this posts then display
                                if(results.posts[i].thread.main_image){
                                    $(".webhose").append('<div class="whimage"><img property="image" src="'+results.posts[i].thread.main_image+'" height="125" width="200"/></div>');
                                }
                                $(".webhose").append('<div property="articleBody" class="wharttext">'+articletext.substr(0,500)+'... <div class="whlink"><a property="url" href= '+results.posts[i].thread.url+'> Read full article »</a></div></div><br>');
                            }
                        });
                    });

1 Ответ

0 голосов
/ 09 декабря 2018

Я думаю, проблема в том, что большинство частей статьи не в элементе <div vocab="http://schema.org/" typeOf="Article">.Это может быть показано как истина, если один отступ HTML из первого добавления: 

<div vocab="http://schema.org/" typeOf="Article">
  <div property="headline" class="whtitel">'+results.posts[i].thread.title_full.substring(0,110)+'</div>
  <div class="source"><b>Source:</b><span property="publisher"> '+results.posts[i].thread.site+'</span></div>
</div>

В следующем я изменил код, чтобы создать div статьи, а затем добавить содержимое к нему, а затем добавить его кдокумент.Следующее не проверено, но я думаю, что это может сработать. 

$(document).ready(function() {
  $.getJSON(webhose_request, function(results) { //send request to API and store results in "results"
    //parse the results' from the JSON response and display them //in a div element for example <div class='webhoseapi'></div>
    //we can loop to display all results in a for loop or using the results.posts.lenght; or just display a few.

    for (var i = 0; i < 10; i++) {
      // you need to read the JSON results to know how to parse them, for example here results.posts[i].text
      var articletext = results.posts[i].text;
      // we use regular expressions REGEX to replace any new line '\n' and carriage return '\r' with html breaks </br>
      articletext = articletext.replace(/(?:\r\n|\r|\n)/g, '</br>');

      var article = $('<div vocab="http://schema.org/" typeOf="Article"></div>');

      article.append('<div property="headline" class="whtitel">' + results.posts[i].thread.title_full.substring(0, 110) + '</div>')
      article.append('<div class="source"><b>Source:</b><span property="publisher"> ' + results.posts[i].thread.site + '</span></div>');)
      if (results.posts[i].thread.author) {
        article.append('<div class="whpublished"><b>By:</b> <span property ="author">' + results.posts[i].thread.author + '</span></div>');
      }
      article.append('<div class="whpublished"><b>Date published:</b><em><span property="datePublished"> ' + results.posts[i].thread.published.substring(0, 10) + '</p></span></em> </div>');
      //we check if there is an image for this posts then display
      if (results.posts[i].thread.main_image) {
        article.append('<div class="whimage"><img property="image" src="' + results.posts[i].thread.main_image + '" height="125" width="200"/></div>');
      }
      article.append('<div property="articleBody" class="wharttext">' + articletext.substr(0, 500) + '... <div class="whlink"><a property="url" href= ' + results.posts[i].thread.url + '> Read full article »</a></div></div><br>');

      $(".webhose").append(article);
    }
  });
});
...