Wyświetlanie danych JSON knockoutJS

pytanie zadane 14 stycznia 2021 w JavaScript przez damian23415 Użytkownik (890 p.)

Witam,

Mam problem jak wyświetlić dane w tabelce na stronie za pomocą jQuery oraz knockoutJS.

Napisałem endpoint do pobierania danych z lokalnej bazy danych, którego przetestowałem za pomocą postmana i wszystko śmiga.

Samo pobieranie JSONa w kodzie JS, którego zwraca endpoint GetContacts, też działa. Problem mam tylko z dostaniem się do tych danych z obiektu JSON aby je wyświetlić na stronie.

<head>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js" type="text/javascript"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
    <body>
        <table>
            <tbody data-bind="foreach: contacts">
                <tr>
                    <td data-bind="text: firstName"></td>
                    <td data-bind="text: lastName"></td>
                    <td data-bind="text: email"></td>
                    <td data-bind="text: phoneNumber"></td>
                    <td data-bind="text: address"></td>
                    <td data-bind="text: city"></td>
                    <td data-bind="text: zipp"></td>
                </tr>
            </tbody>
        </table>
    </body>

<script type="text/javascript">

        function Contact(data)
        {
            this.firstName = ko.observable(data.firstName);
            this.lastName = ko.observable(data.lastName);
            this.email = ko.observable(data.email);
            this.phoneNumber = ko.observable(data.phoneNumber);
            this.address = ko.observable(data.address);
            this.city = ko.observable(data.city);
            this.zipp = ko.observable(data.zipp);
        }

        function ContactListViewModel() {
            var self = this;
            self.contacts = ko.observableArray([]);
            self.firstName = ko.observable(""),
            self.lastName = ko.observable(""),
            self.email = ko.observable(""),
            self.phoneNumber = ko.observable(""),
            self.address = ko.observable(""),
            self.city = ko.observable(""),
            self.zipp = ko.observable("")

            $.getJSON("https://localhost:44329/api/Contact/GetContacts", function(allData) {
                console.log(JSON.stringify(allData.entry));
                self.contacts(allData.entry)
            })

        }
        
        ko.applyBindings(new ContactListViewModel());
    </script>

Pozdrawiam

1 odpowiedź

odpowiedź 14 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

self.contacts(allData.entry)

Co ma na celu ta linijka? W dokumentacji Observable Array widzę, że wywołanie instancji tego observable bez parametrów zwraca tablicę, a Ty wołasz to z parametrem - co chcesz osiągnąć takim wywołaniem?

Jeśli chcesz dodać do tablicy pod observablem wartość allData.entry to może wykonaj na nim .push? Nie pokazałeś, co dokładnie jest w tych danych - ale sądząc po pętli w HTML'u to jest obiekt, więc powinno zadziałać jeśli go dodasz do tablicy.

komentarz 14 stycznia 2021 przez damian23415 Użytkownik (890 p.)

Dane z Json'a są takie:

[
   {
      "id":7,
      "firstName":"Franek",
      "lastName":"Nowakowski",
      "email":"daaaxxw@o3.pl",
      "phoneNumber":"3421 3123 1",
      "address":"Waszyngton 23",
      "city":"Nowy York",
      "zip":"33-224"
   }
]

komentarz 14 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Skoro to jest tablica z obiektem, to warto wyjąć ten obiekt z tablicy przed dodaniem go do docelowej tablicy (znajdującej się pod observablem self.contacts). Ewentualnie, jeśli observable zaimplementowany w Knockout'cie na to pozwala, nadpisz tablicę self.contacts tym co zwraca API (jeśli potrzebujesz tego jako observable, to nadpisz również observablem wrapującym tablicę) - zależy czy tą docelową tablicę kontaktów planujesz później modyfikować czy w całości nadpisywać.