Display JSONP Array Using Jquery Loop

Question

I've dug through dozens of related questions, and tried to implement but just can't quite get it to come together. I'm certain it is just some painfully simple miss, since I'm a rookie.

Redacted URL as it has sensitive data, but it prints to the console with the full array, so the ajax call seems to work. Just can't quite wrap my mind around the final step of display the results in a DIV. From reading, it seems like a Loop is necessary but can't quite get there.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div id="jsonpResult"></div>

<script>
$(document).ready(function(){
        $.ajax({
            url: '**MyURL**',
            data: {check: 'one'},
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'jobs',
            success: function(result){
                console.log(result);
            }
        });
    });

  function jsonpCallback(data){
       for(var i = 0 ; i < data.length ; i++){
            $('#jsonpResult').append(item.title+"<br />");
       }
   }
</script>

Welcome to Stack Overflow. Where is `item` defined? You reference `item.title` yet there is no definition for this. I would expect `data[i].title`. You may also want to review: https://learn.jquery.com/ajax/working-with-jsonp/ — Twisty, Mar 11 '22 at 18:30
See Also: https://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp — Twisty, Mar 11 '22 at 18:37

score 0 · Accepted Answer · answered Mar 11 '22 at 18:40

You might consider the following.

$(function() {
  $.ajax({
    url: '**MyURL**',
    data: {
      check: 'one'
    },
    dataType: 'jsonp',
    success: function(result) {
      console.log(result);
      $.each(result, function(i, item) {
        $("<div>").html(item.title).appendTo('#jsonpResult');
      });
    }
  });
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div id="jsonpResult"></div>

Without a Test URL, I am unable to test this code completely.

References:

Thank you so much. Between this and the references you provided I was able to get it up and running. Very appreciative of your help! — Kegan Sims, Mar 11 '22 at 21:22

Display JSONP Array Using Jquery Loop

1 Answers1