Cannot output multiple line string to HTML

Question

Here is my code:

$( 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);
    });
});

And HTML:

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

I cannot handle from where problem comes, If I change this row:

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

to

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

for example, it works perfect, so I think that multiply rows string is the problem? Am I wrong?

EDIT: Okay .. major problem was in me, when I ispect with cntrl + u the string doesn't appear but when I inspect with f12 it is there!

did you mean jquery.insertAfter(): https://api.jquery.com/insertAfter/ ? — Mischa, Sep 25 '19 at 12:02
@mplungjan then it's visible as string on page, I want to see it only on expect (f12) — Sahin Urkin, Sep 25 '19 at 12:06
OOT: Why are you concatenating when you're using backticks already? Use embedded expressions and save yourself some eyesore — Abana Clara, Sep 25 '19 at 12:06
@JoEark https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals — Abana Clara, Sep 25 '19 at 12:11
Okay .. major problem was in me, when I ispect with `cntrl + u` the string doesn't appear but when I inspect with `f12` it is there .. Thank you all, some of the answers really helps me. When @VLAZ said "op code should work" that was the key :) — Sahin Urkin, Sep 25 '19 at 12:30
_This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers._ — mplungjan, Sep 25 '19 at 13:24
@mplungjan I know, but "You cannot delete this question as others have invested time and effort into answering it. For more information, visit the help center." — Sahin Urkin, Sep 25 '19 at 14:02
Why would you expect it to appear with ctl-u? That's the shortcut for "View Source", which is the original HTML, not the current DOM. — Barmar, Oct 01 '19 at 18:35

Mr. Polywhirl · Answer 1 · 2019-09-25T12:25:20.723

Could you just create a <SCRIPT> jQuery element and just set the text value?

Also, since it is JSON, you could just serialize it into a string if you wanted.

Additionally, you can skip concatenation and use placeholders in your template literal. e.g. ${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>

I'm not sure why this is supposed to fix the problem - what OP has should also work, even if it's not a good practice. — VLAZ, Sep 25 '19 at 12:12

score 0 · Answer 2 · answered Sep 25 '19 at 12:13

Can you try replacing your schema_org value with this?

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

And try. I think the issue is that your script is being picked up properly

Forward slash is not a special character in template literals, so no need to escape it. The expression interpolation is better to be used than just concatenation but that also shouldn't break anything. — VLAZ, Sep 25 '19 at 12:19

score -1 · Answer 3 · answered Sep 25 '19 at 12:22

Your closing script tag is breaking the string, using escape character for this will make it work.

So, it's not about multi-line strings.

Here is an example

$( 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);
});

"*Your closing script tag is breaking the string*" how is it breaking the string? Forward slashes are not special in a template literal — VLAZ, Sep 25 '19 at 12:31

Cannot output multiple line string to HTML

3 Answers3