Невозможно вывести многострочную строку в HTML

Question

Вот мой код:

$( document ).ready(function() {

    $.getJSON('onlineinsurance/services/aggregateRating.php', { rating: false } , function(result) {
        $("#rating-value").text(result['avg_rating']);
        $("#rating-count").text(result['count']);
        schema_org = ` <script type="application/ld+json">
        {
            "@context": "http://schema.org/",
            "@type": "Product",
            "name": "Some name",
            "image": "some image path",
            "description": "some description",
            "brand": "some brand name",
            "offers": {
            "@type": "AggregateOffer",
            "priceCurrency": "BGN",
            "lowPrice": "176.93",
            "offerCount": 10
            },
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "'` + result['avg_rating'] + `'",
                "reviewCount": "'` + result['count'] + `'"
            }
        }
    </script>
    `;
        $("#schema-org").after(schema_org);
    });
}); 

И HTML:

<p id="schema-org"></p> 

Я не могу решить, откуда возникает проблема, ЕслиЯ изменяю эту строку: например,

$("#schema-org").after(schema_org);

на

$("#schema-org").after('test');

, она отлично работает, так что я думаю, что проблема заключается в том, что многострочная строка является проблемой?Я не прав?

РЕДАКТИРОВАТЬ: Хорошо ... главная проблема была во мне, когда я смотрю с помощью cntrl + u, строка не появляется, но когда я проверяю с помощью f12, она есть!

Answer 1

Можете ли вы попробовать заменить значение schema_org на это?

` <script type="application/ld+json">
    {
        "@context": "http://schema.org/",
        "@type": "Product",
        "name": "Some name",
        "image": "some image path",
        "description": "some description",
        "brand": "some brand name",
        "offers": {
        "@type": "AggregateOffer",
        "priceCurrency": "BGN",
        "lowPrice": "176.93",
        "offerCount": 10
        },
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "'${result['avg_rating']}'",
            "reviewCount": "'${result['count']}'"
        }
    }
<\/script>
`;

И попробуйте.Я думаю, проблема в том, что ваш скрипт правильно подобран

Answer 2

Ваш закрывающий тег сценария разрывает строку, использование escape-символа для этого заставит его работать.

Таким образом, речь не идет о многострочных строках.

Вот пример

$( document ).ready(function() {
var schema_org = ` <script type="application/ld+json">
    {
        "@context": "http://schema.org/",
        "@type": "Product",
        "name": "Some name",
        "image": "some image path",
        "description": "some description",
        "brand": "some brand name",
        "offers": {
        "@type": "AggregateOffer",
        "priceCurrency": "BGN",
        "lowPrice": "176.93",
        "offerCount": 10
        },
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "avg_rating",
            "reviewCount": "count"
        }
    }
<\/script>
`;
    $("#schema-org").after(schema_org);
});

Answer 3

Не могли бы вы просто создать элемент <SCRIPT> jQuery и просто установить текстовое значение?

Кроме того, поскольку это JSON, вы можете просто сериализовать его в строку, если хотите.

Кроме того, вы можете пропустить конкатенацию и использовать заполнители в шаблонном литерале.например, ${result['avg_rating']}

JSON.stringify(jsonObj, null, 2);

let result = {}; // Avoid error below...

let schema_org = `{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Some name",
  "image": "some image path",
  "description": "some description",
  "brand": "some brand name",
  "offers": {
    "@type": "AggregateOffer",
    "priceCurrency": "BGN",
    "lowPrice": "176.93",
    "offerCount": 10
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "'${result['avg_rating']}'",
    "reviewCount": "'${result['count']}'"
  }
}`;

$("#schema-org").after($('<script>').attr('type', 'application/ld+json').text(schema_org));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="schema-org"></div>