Приятно, наконец, представить некоторые из моих собственных вопросов здесь в погоне за знаниями. Мне было интересно, может ли кто-нибудь помочь мне со следующей проблемой. У меня есть jQuery GET, где объект JSON извлекается через API.
Мой код:
var div = document.getElementById('myData');
jQuery(document).ready(function() {
const Url = 'https://boards-api.greenhouse.io/v1/boards/sunrock/jobs/5104060003';
jQuery('.btn').click(function() {
jQuery.ajax({
url: Url,
type: 'GET',
success: function(result) {
console.info(result);
x = result.title
var jobTitle = x;
document.getElementById('jobTitle').innerHTML = jobTitle;
y = result.content
var jobDescription = y;
document.getElementById('jobDescription').innerHTML = jobDescription;
},
error: function(error) {
console.info(`Error ${error}`)
},
});
});
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class='btn'>
Clicke here for the GET request
</button>
<div id='jobTitle'>Job Title here</div>
<div id='jobDescription'>Job Description here</div>
Я хочу, чтобы часть этой информации отображалась в HTML. Но всякий раз, когда я применяю переменную с информацией к div с помощью innerHTML, я получаю следующее:
<p><strong>Your role</strong></p> <p>
Как видите, HTML-элементы печатаются полностью, что странно. Кто-нибудь знает, как это исправить?
У меня есть jsFiddle с моим кодом здесь: https://jsfiddle.net/whimsicalcodingman/38a45udt/159/
В stackoverflow.com/questions/1912501/… и stackoverflow.com/questions/5796718/html-entity-decode есть подсказки, как выполнить "htmlentitydecode" в JavaScript.
Как указал @GrafiCode, проблема не в вашем коде, когда вы обращаетесь к свойству content
. Проблема заключается в информации, которую вы получаете для свойства content
.
Свойство content
возвращает это:
"content": "<p><strong>Your role</strong></p>\n<p>The Project Finance...
Который:
"content": "<p><strong>Your role</strong></p>\n<p>The Project Finance...
Поэтому я вижу для вас два варианта, вы можете либо исправить это в бэкенде, либо исправить это во фронтенде.
Если вы хотите исправить это во внешнем интерфейсе, вам может быть интересно использовать дезинфицирующее средство для HTML.
Например, вы можете HTML-дезинфицирующий API Mozilla
Если вы хотите исправить это в бэкенде, вы можете либо исправить текст вручную, либо попытаться найти библиотеку.
Например, если ваш сервер — NodeJS, вы можете использовать эту библиотеку пакетов дезинфицировать-html.
это внутри вашего ответа json,
content
свойство начинается так&lt;p&gt;&lt;strong&gt;Your role&lt;/strong&gt;&lt;/p&gt;
, которое<p><strong>Your role</strong></p> <p>
выражено как htmlentities.