使用 jQuery/JavaScript 在 HTML 页面中显示/打印一组嵌套的 JSON API 数据（列表）

Question

I have just started working on the jQuery,javaScript and AJAX and trying to consume an API designed by me. The result at the backend is as follows

[
    {
        "id": 1,
        "choice_text": "They work on List View generally",
        "poll": 1
    },
    {
        "id": 3,
        "choice_text": "Learn on Digital Ocean",
        "poll": 2
    }
]

This is a list of Choices with id,poll id and Choice Text. I want to display this data in the HTML page using the AJAX/javaScript/jQuery. Any would do. This can Either be a table , list or div element. How can I do this??

When I used the below code,

$('#get-list').click(function () {
        $.get("http://127.0.0.1:8000/rest-api/choices/", function (data,status) {
            console.log(data);
            $.each(data, function () {
               $('div').html('<p>'+data+'</p>')
            })
            })
        })

I got

[object Object],[object Object]

in my page but the console.log() shows the Array with the objects inside it with proper format.

How can This be done? Any Idea? Have checked a few links from stackoverflow but it's going over my head.

Answer 1

try

$('div').html('<p>' + JSON.stringify(data) + '</p>')

but i would suggest .append() rather than .html()