Как я могу динамически обновить скрипт JSON-LD с помощью Ajax? - PullRequest
0 голосов
/ 26 января 2019

У меня есть JSON-LD, как показано, где ratingValue и ratingCount поступают из бэкэнда, но я хочу сделать это из пользовательского интерфейса через вызов Ajax и обновить его в aggregateRating.

Нопри открытии источника страницы он показывает данные, поступающие из бэкэнда, но когда я делаю console.log(), он показывает ожидаемое значение, но оно не обновляется в источнике страницы.

Есть ли способ сделать это со стороны пользовательского интерфейса?

<script type="application/ld+json"> {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": "Phone",

    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "ratingCount": "80"
    },
    "offers": {
        "@type": "AggregateOffer",
        "lowPrice": "5",
        "highPrice": "10",
        "priceCurrency": "USD",
        "availability": "http://schema.org/InStock"
    }
}
</script>
(function () {
    var id = $ {
        prdId
    };
    var response = "";
    $.ajax({
        url: url;
        dataType: "jsonp",
        data: {
            pid: id,
            _method: "GET",
            t: new Date().getTime()
        },
        timeout: 20000,
        xhrFields: {
            withCredentials: true
        },
        type: "get",
        success: function (json) {
            if (json.success == true) {
                response = json.data;
                //call api
                structureData(response);
            } else {
                response = "error";
            }

        }
    });


    function structureData(resp) {
        var json = document.querySelector('script[type="application/ld+json"]').textContent;
        json = JSON.parse(json);

        json["aggregateRating"] = {
            "@type": "AggregateRating",
            "ratingValue": resp.averageScore,
            "reviewCount": resp.averageScore
        }
        var jso = JSON.stringify(json);

        document.querySelector('script[type="application/ld+json"]').textContent = jso;

    }
}

1 Ответ

0 голосов
/ 27 марта 2019

Вы определенно можете динамически обновлять JSON-LD, это более грубый пример, но вы можете запустить фрагмент кода и увидеть, как он работает.Я нашел код через этот вопрос примерно на ту же тему, но изменил его так, чтобы он лучше соответствовал вашему примеру:

let jsonLdScript = document.querySelector('script[type="application/ld+json"]');
let jsonld = JSON.parse(jsonLdScript.innerText);

document.getElementById('orig-result').textContent = jsonLdScript.innerText;

jsonld.aggregateRating.ratingValue = "5";
jsonld.aggregateRating.ratingCount = "95";

let newJson = JSON.stringify(jsonld);

jsonLdScript.innerHTML = newJson;

document.getElementById('result').textContent = jsonLdScript.innerText;
<html>
  <head>
  <script type="application/ld+json"> 
  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": "Phone",
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "ratingCount": "80"
    },
    "offers": {
        "@type": "AggregateOffer",
        "lowPrice": "5",
        "highPrice": "10",
        "priceCurrency": "USD",
        "availability": "http://schema.org/InStock"
    }
  }
  </script>
  </head>
  <body>
    <p>Original Output JSON-LD: <br /><strong id="orig-result"></strong></p>
    <p>New Output JSON-LD: <br /><strong id="result"></strong></p>
  </body>
</html>

Как вы тестируете?Несколько вещей, которые нужно иметь в виду:

  • Очевидно, что DOM необработанной страницы не будет изменен
  • Вы должны увидеть изменения в инструментах разработки
  • Если вы 'Если вы используете Googles Инструмент структурированных данных , а исходный JSON анализируется до того, как ваша функция обновит его, я держу пари, что Google не поймает это изменение.
  • Если вы используете querySelector,Возможно, вы захотите подтвердить, что JSON-LD, который вы намереваетесь изменить, является первым экземпляром JSON-LD на странице.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...