skip to Main Content

I created a page where after loading the data will appear. I am using github url and ajax POST. But the data is not showing. What should I fix from the code that I have made?

<div id="content"> 
</div>
window.onload = function(){
    $.ajax({
        type: 'POST',
        url: 'https://raw.githubusercontent.com/bimobaskoro/hewan/main/kucing.json',
        dataType: 'application/json',
        sucess: function (data) {
            html = '<div class="content" id="content"></div>'
            html += '<h1>' + data.judul + '</h1>'
            html += '<p>' + data.isi + '</p>'
            html += '</div>'
            document.getElementById('content').innerHTML += html;
        },
        error: function() {

        }
    });
}

2

Answers


  1. Why would you use post to a json file. Get method is enough.

    $.ajax({
        url: 'https://raw.githubusercontent.com/bimobaskoro/hewan/main/kucing.json',
        success: function (data)
        { 
            var html = '<div class="content" id="content">';
            var obj=JSON.parse(data);
            obj.forEach((e)=>{
                html += '<h1>' + e.judul + '</h1>'
                html += '<p>' + e.isi + '</p>'
            });
            
            html += '</div>'
            document.getElementById('content').innerHTML = html;    
        }
    });
    
    Login or Signup to reply.
  2. Consider the following.

    $(function(){
      $.getJSON("https://raw.githubusercontent.com/bimobaskoro/hewan/main/kucing.json", function (data) {
          var html = $("<div>", {
            class: "content"
          });
          $("<h1>").html(data.judul).appendTo(html);
          $("<p>").html(data.isi).appendTo(html);
          $("#content").append(html);
      });
    }
    

    As GitHub is not apart of the same domain, you may encounter CORS issues. If so, you might consider JSONP.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search