append ajax result to div

Question

I'm making an ajax call to the IMDb API to get the movie data for 'The Shawshank Redemption'. I want this data to be put in the div I created.

<div id="movie-data"></div>

My js code currently:

$(init);


function init() {

    $.ajax({
        dataType: "json",
        url: "http://www.omdbapi.com/?i=tt0111161",
        success: function (data) {
            console.log(data);
            $("#movie-data").append(data);
        }
    });

It doesn't give any response. However, I can see the data in my console. When I append <p>Test</p> instead of data it does return 'Test' to the screen.

@MilindAnantwar I don't know any more than you know. If you visit the url you can find all the info about the movie. [link](http://www.omdbapi.com/?i=tt0111161) — , Apr 03 '15 at 13:26

score 5 · Answer 1 · answered Apr 03 '15 at 13:59

This is what I did. It seems to be working now. Thanks everyone.

 $.ajax({
        dataType: "json",
        url: "http://www.omdbapi.com/?i=tt0111161",
        success: function (data) {
            console.log(data);
            $("#movie-data").append(JSON.stringify(data));

score 1 · Answer 2 · edited May 23 '17 at 10:31

The following should work

$("#movie-data").html(data.Title);

because data will be in json format, like this:

{"Title":"Titanic","Year":"1997","Rated":"PG-13","Released":"19 Dec 1997","Runtime":"3 h 14 min","Genre":"Drama, Romance","Director":"James Cameron","Writer":"James Cameron","Actors":"Leonardo DiCaprio, Kate Winslet, Billy Zane, Kathy Bates","Plot":"A seventeen-year-old aristocrat, expecting to be married to a rich claimant by her mother, falls in love with a kind but poor artist aboard the luxurious, ill-fated R.M.S. Titanic.","Poster":"http://ia.media-imdb.com/images/M/MV5BMjExNzM0NDM0N15BMl5BanBnXkFtZTcwMzkxOTUwNw@@._V1_SX300.jpg","imdbRating":"7.6","imdbVotes":"449,162","imdbID":"tt0120338","Type":"movie","Response":"True"}

Check these resources:

Using AJAX to Extract Data from IMDB API

http://99webtools.com/blog/php-get-movie-information-from-imdb/

I tried the second option and now it's returning [object Object]. — , Apr 03 '15 at 13:23

score 0 · Answer 3 · answered Apr 03 '15 at 13:38

Try like this. API is returning JSON values you need to get the values like mentioned below. Hope this helps you.

var content = 'Title : '+data.Title ;
content += ' Year : '+data.Year ;
content += ' Rated : '+data.Rated ;
content += ' Released : '+data.Released ;
$("#movie-data").append(content);

score 0 · Answer 4 · answered Apr 03 '15 at 13:47

<div id="movie-data"></div>
function init() {
var html='';
    $.ajax({
        dataType: "json",
        url: "http://www.omdbapi.com/?i=tt0111161",
        success: function (data) {
            for(var key in data) {
            var value = data[key];
                html+='<div>'+key+':'+value+'</div>'
            }
            $("#movie-data").append(html);

        }
    });
}
init();

working demo

score 0 · Answer 5 · answered Jan 26 '17 at 11:53

0

the answer is:

function init() {

$.ajax({
    dataType: "json",
    url: "http://www.omdbapi.com/?i=tt0111161",
    success: function (data) {
        console.log(data);
        $("#movie-data").html($(data).append(data));
    }
});

answered Jan 26 '17 at 11:53

Po Po

231
3
8

score 0 · Answer 6 · answered Jun 19 '17 at 12:51

0

You could try to delete dataType: "json" from your ajax call

$.ajax({
    dataType: "json",
    url: "http://www.omdbapi.com/?i=tt0111161",
    success: function (data) {
        console.log(data);
        $("#movie-data").append(data);
    }
});

answered Jun 19 '17 at 12:51

arniotaki

2,175
2
23
26

score 0 · Answer 7 · answered Apr 18 '18 at 23:13

0

You can try with JSON.stringify(data)

answered Apr 18 '18 at 23:13

Palmiro Lousse

5
7

Seems that OP tried it (based on [their own answer](https://stackoverflow.com/a/29433601/7404943)) – barbsan Aug 01 '19 at 10:18

score 0 · Answer 8 · edited Aug 24 '20 at 14:05

0

The code would be the following:

$(document).ready(function(){

$.ajax({
    method:"get",
    url:'{{ route('getnotificationcount') }}',
    success:function(data){
            console.log(data); 

        for(var key in data) {
        var value = data[key];
        html+='<div>'+key+':'+value+'</div>'
        }
        $("#notifyy").append(html);
        
    

    }
});

});

edited Aug 24 '20 at 14:05

Let's try

1,044
9
20

answered Aug 24 '20 at 10:46

Mohammad Usman

21
2

append ajax result to div

8 Answers8

Linked