Запрос AJAX не получает свойство, которое я хочу

Мне нужно отправить запрос AJAX на следующий API: https://jsonplaceholder.typicode.com/posts. а затем отсортировать результат по атрибуту «заголовок» (в порядке возрастания) и распечатать по console.log

Проблема здесь в том, что я не получаю атрибут title, вместо этого я получаю много этого:

Website Example, AJAX REQUEST, button, fetch API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>Getting Started With Fetch API</h1>
        <button id="fetchJsonData">Fetch User Data</button>
    </div>
    <hr>
    <div id="response"></div>
</body>
<script>
    document.getElementById('fetchJsonData').addEventListener('click', fetchJson);

    function fetchJson(){
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(json => console.log(json))
    }
    document.getElementById('fetchJsonData').addEventListener('click', fetchJson);
    
        function fetchJson(){
            fetch('https://jsonplaceholder.typicode.com/posts')
                .then(response => response.json())
                .then(titles => {
                    let output = '<h2>Lists of Titles</h2>';
                    // output += '<ul>';
                    titles.forEach(function(titles) {
                        output += `
                            <li>
                                ${titles}
                            </li>
                        `;
                        output += '</ul>'
                    document.getElementById("response").innerHTML = output;
                    });
                    
                });
        }

        function sortList(ul) {
  var ul = document.getElementById(ul);

  Array.from(ul.getElementsByTagName("LI"))
    .sort((a, b) => a.textContent.localeCompare(b.textContent))
    .forEach(li => ul.appendChild(li));
}

sortList("response");
        
</script>
</html>
        

Я неправильно обращаюсь к данным? пожалуйста посоветуйте, заранее спасибо

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
2
0
31
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

В цикле forEach ${titles} должно быть ${titles.title}

Большой! это было проще, чем я думал, спасибо!

Andrés Bolívar 23.04.2022 10:42
Ответ принят как подходящий

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

document.getElementById('fetchJsonData').addEventListener('click', fetchJson);

function fetchJson() {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(json => console.log(json))
}
document.getElementById('fetchJsonData').addEventListener('click', fetchJson);

function fetchJson() {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(titles => {
      let output = '<h2>Lists of Titles</h2>';
      output += '<ul>';
      titles.sort((a, b) => a.title.localeCompare(b.title)).forEach((obj) => {
        output += `<li>${obj.title}</li>`;
      });
      output += '</ul>';

      document.getElementById("response").innerHTML = output;
    });
}
<div>
  <h1>Getting Started With Fetch API</h1>
  <button id="fetchJsonData">Fetch User Data</button>
</div>
<hr>
<div id="response"></div>

Сделайте это вот так.

Прочтите документы, чтобы узнать больше о javascript.

document.getElementById('fetchJsonData')
    .addEventListener('click', fetchJson);

function fetchJson(){
            fetch('https://jsonplaceholder.typicode.com/posts')
                .then(response => response.json())
                .then(posts => {
                    let output = '<h2>Lists of Titles</h2>';
                    posts.sort((a, b) => a.title.localeCompare(b.title));
                    posts.forEach(function(post) {
                        output += `
                            <li>
                                ${post.title}
                            </li>
                        `;
                        output += '</ul>'
                    document.getElementById("response").innerHTML = output;
                    });
                    
                });
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>Getting Started With Fetch API</h1>
        <button id="fetchJsonData">Fetch User Data</button>
    </div>
    <hr>
    <div id="response"></div>
</body>
</html>

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