Отрисовка HTML-элементов из объекта JSON get. Как отображать HTML?

Приятно, наконец, представить некоторые из моих собственных вопросов здесь в погоне за знаниями. Мне было интересно, может ли кто-нибудь помочь мне со следующей проблемой. У меня есть 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/

это внутри вашего ответа json, content свойство начинается так &amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Your role&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;, которое <p><strong>Your role</strong></p> <p> выражено как htmlentities.

GrafiCode 05.05.2022 16:08

В stackoverflow.com/questions/1912501/… и stackoverflow.com/questions/5796718/html-entity-decode есть подсказки, как выполнить "htmlentitydecode" в JavaScript.

CBroe 05.05.2022 16:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как указал @GrafiCode, проблема не в вашем коде, когда вы обращаетесь к свойству content. Проблема заключается в информации, которую вы получаете для свойства content.

Свойство content возвращает это: "content": "&lt;p&gt;&lt;strong&gt;Your role&lt;/strong&gt;&lt;/p&gt;\n&lt;p&gt;The Project Finance...

Который:

"content": "<p><strong>Your role</strong></p>\n<p>The Project Finance...

Поэтому я вижу для вас два варианта, вы можете либо исправить это в бэкенде, либо исправить это во фронтенде.

Если вы хотите исправить это во внешнем интерфейсе, вам может быть интересно использовать дезинфицирующее средство для HTML.

Например, вы можете HTML-дезинфицирующий API Mozilla

Если вы хотите исправить это в бэкенде, вы можете либо исправить текст вручную, либо попытаться найти библиотеку.

Например, если ваш сервер — NodeJS, вы можете использовать эту библиотеку пакетов дезинфицировать-html.

Другие вопросы по теме