Отображение данных JSON в HTML + jQuery

Question

У меня есть REST API, который производит вывод JSON следующим образом:

    [{"case": 2005608875, 
  "filepath": "/x/eng/cs-data/latx/dev/20150510_uploads/wilp/perfstat_20150415_001256/node/10.95.172.19/output.data", 
  "datatype": "perf8",
  "perfdateend": "2015-04-15T02:15:37-04:00", 
  "userid": "wilp", 
  "filename":"perfstat_20150415_001256.zip",
  "version": "v8.1 ", 
  "hosts": [{"filer": "cluster1-01", 
  "hostname": "10.95.172.18", }],
  "perfid":"98"}]

Я пытаюсь отобразить эти данные в HTML, но я не могу этого сделать, вот мой div HTML + jQuery:

<div class="widgetcontent">

                                <select>
                                <option>
                                96  
                                </option>
                                <option>
                                97
                                </option>
                                <option>
                                98
                                </option>
                                <option>
                                99
                                </option>
                                </select>

                                   <button class="topcoat-button--cta">Get Data!</button>



                    </div><!--widgetcontent-->
<div class='content'> </div>
                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                    <script src="js/pull.js"></script>

А вот и мой jQuery (pull.js)

(function ($) {
$('button').on('click', function () {
    // remove resultset if this has already been run
    $('.content ul').remove();


    // get selected zip code from selectbox
    var perfid = $('select option:selected').text();

    // make AJAX call
    $.getJSON('http://myapiurl.com/ws/spm/search/perfid/' +perfid, function (data) {

        // do all this on success       
        var items = [],
            $ul;

        $.each(data, function (key, val) {
            //iterate through the returned data and build a list
            items.push('<li id="' + key + '"><span class="Case">' + val.case + '</span><br><span class="UserID">' + val.userid + '</span></li>');
        });
        // if no items were returned then add a message to that effect
        if (items.length < 1) {
            items.push('<li>No Data Found!</li>');
        }




        // append list to page
        $ul = $('<ul />').appendTo('.content');

        //append list items to list
        $ul.append(items);
    });
});
  }(jQuery));

Я тяну свои волосы на это с 2 дней и до сих пор не могу понять это.

javascript jquery html json

4

Akki 14 Дек 2015 в 09:07

Answer 1

Ваш JQuery должен быть

$.getJSON('http://myapiurl.com/ws/spm/search/perfid/' + perfid, function (data) {

    // do all this on success       
    var itemsHtml = "",        

    $.each(data, function (key, val) {
        //iterate through the returned data and build a list
        itemsHtml+= '<li id="' + key + '"><span class="Case">' + val.case + '</span><br><span class="UserID">' + val.userid + '</span></li>';
    });
    // if no items were returned then add a message to that effect
    if (data.length == 0) {
        itemsHtml = '<li>No Data Found!</li>';
    }

    // append list to page
    $(".content").append("<ul>"+itemsHtml+"</ul>");
});

1

Parth Trivedi 14 Дек 2015 в 06:27

Answer 2

$.getJSON('http://myapiurl.com/ws/spm/search/perfid/' + perfid, function (data) {

    // do all this on success  
    var itemsHtml = '<li>No Data Found!</li>';
    if (data.length) {  

        itemsHtml = "",        

        $.each(data, function (key, val) {
            //iterate through the returned data and build a list
            itemsHtml+= '<li id="' + key + '"><span class="Case">' + val.case + '</span><br><span class="UserID">' + val.userid + '</span></li>';
        });

    }

    $(".content").html("<ul>"+itemsHtml+"</ul>");

});

2

waqas jamil 14 Дек 2015 в 06:43

Answer 3

Пытаться:

$('button').on('click', function () {
    // remove resultset if this has already been run
    $('.content ul').empty();


    // get selected zip code from selectbox
    var perfid = $('select option:selected').text();

    $.getJSON('http://myapiurl.com/ws/spm/search/perfid/' +perfid, function (data) {


            $.each(data, function (key, val) {
                //iterate through the returned data and build a list
                $('.content ul').append('<li id="' + key + '"><span class="Case">' + val.case + '</span><br><span class="UserID">' + val.userid + '</span></li>');
            });
            // if no items were returned then add a message to that effect
            if (data.length < 1) {
                $('.content ul').append('<li>No Data Found!</li>');
            }
        });
 });

0

madalinivascu 14 Дек 2015 в 06:28

Answer 4

Единственное, что я вижу неправильно, это то, что вам нужен div с class = "content":

<div class='content'></div>

Это немного опасно, потому что многие вещи используют «контент» как класс.

Кроме этого, иногда результаты json вкладываются в «results», поэтому вам нужно получить доступ к данным через «results.data», а не просто «data». В любом случае, вот jsfiddle без вызова restful:

https://jsfiddle.net/mckinleymedia/n48s458v/1/

0

William Schroeder McKinley 14 Дек 2015 в 06:30

Отображение данных JSON в HTML + jQuery

4 ответа

Похожие вопросы

Новые вопросы

javascript