Jak wrzucić dane JSON w htmlowego diva?

0

Witam serdecznie!

Napisałem funkcje, która wyrzuca mi dane w formacie JSON i są one posortowane. Jak mogę wrzucić je w diva tak, aby przedstawić nowy posortowany board.? Proszę o wyrozumiałość bo dopiero uczę się.

Pozdrawiam!

0

Dzięki wielkie za pomoc. Powalczę z tym na miarę swoich możliwości i w razie problemów będę pytał. :)

3

Eval do JSONa? Jeśli przychodzący z serwera string jest we właściwym formacie, to nic nie trzeba robić, silnik przeglądarki robi to automagicznie.
Najprościej będzie zrobić to na jQuery, w dużym uproszczeniu coś mniej-więcej takiego (zakładam, że przychodzi tablica z danymi):

var container = $("#container"); // kontener na html z danymi
$.ajax({
    url: 'url-do-miejsca-zwracającego-json',
    method: "POST",
    success: function (data) { 
        container.empty();
        for (var i = 0; i < data.length; ++i) {
            var rowContainer = container.append($("<div class='row'>"); 
            for each (var key in data[i]) 
            {
                rowContainer.append($("<div class='item'>").text(data[i][key])); 
            }
         }
     }
 });

Pisane z palca, nie musi zadziałać, ale musisz iść mniej-więcej w tym kierunku, oczywiście musisz obsłużyć błędy komunikacji, rozbić to na osobne, małe funkcje, być może ubrać w klasę/klasy itp.

0

Dziękuje bardzo! W końcu ktoś konkretniej coś napisał :)
Jak ogarnę to dam znać :)
Pozdrawiam!

0

Doszedłem do takiego momentu:


        $("#button-sort-cases").click(function updateCases(sort, order) {

            var params = {};
            params["sort"] = "createDate";
            params["order"] = "desc";

            var url = "{{restUrl}}cases/caselistsorted";
            $.ajax({
                type: 'GET',
                url: url,
                data: params,
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data != null) {

                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("Error: " + textStatus + " " + url);
                }
            })
        });

Wszystko tak jak chciałem czyli po kliknięciu ładowane są dane JSON i wyświetlają mi się teraz w konsoli. Pytanie brzmi jak teraz podmienić je z istniejącymi danymi na stronie? Rozpoczynam funkcje od jeśli data nie równa zero ale nie wiem jakie dalej to logicznie napisać.

1

btw
var params = { sort: "createDate", order: "desc" };

$("#button-sort-cases").click(function (sort, order) {

0

Udało mi się podmieć divy w ten sposób :)) Dziękuje za pomoc!


        $(document).on('click', '#button-sort-cases', function(event) {

            var params = {};
            params["sort"] = "createDate";
            params["order"] = "desc";

            var url = "{{restUrl}}cases/caselistsorted";
            $.ajax({
                type: 'GET',
                url: url,
                data: params,
                dataType: 'json',
                success: function (data) {
                    //console.log(data);
                    if (data != null) {
                        $(".manage-board-container").html(data["code"]);
                        console.log(data);
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("Error: " + textStatus + " " + url);
                }
            })
        });

A gdybym chciał dodać opcje żeby wrzucało mi po ponownym kliknięciu z innego jsona dane to jak to ugryźć?
Pozdrawiam!

0

No panie, a co zrobisz, jeśli będziesz chciał żeby - w dowolnym języku programowania - jakiś przycisk robił co innego po pierwszym kliknięciu, a co innego po kolejnych?

1

Zliczaj sobie kliknięcia przycisku do zmiennej i później sprawdzaj w warunku - jak są parzyste to wysyłasz request ajaxowy do jednego miejsca, a w przeciwnym wypadku do drugiego. Oczywiście można to też rozwiązać zwykłym true/false, ale zagadnienie tak banalne, że nie ma większego sensu się produkować i pewnie się połapiesz jak to zrobić.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0