AJAX Request not receiving the property I want

Issue

I have to send an AJAX request to the following API: https://jsonplaceholder.typicode.com/posts. and then sort the result by the "title" attribute (ascending order) and print by console.log

The problem here is that I don’t get the title attribute instead I get a lot of this:

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>
        

Am I accesing the data the wrong way? please advice, thanks in advance

Solution

The response is an array of objects, you need to get the string vaule of the title if you want to render it directly.

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>

Answered By – Cesare Polonara

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.