JSON - wyświetlanie danych na stronie

Dla specjalistów Webmastering
#1

Witajcie,

Posiadam na swojej stronie link: https://api.pewnastrona.pl/8/account/info?login=8472938&key=g8dje4bn
(dodam, że jest to link API innej strony) i gdy w niego wejdę to na PC’eta pobiera mi się plik… tutaj jest problem, ponieważ nawet nie wiem jaki to typ pliku, gdyż nie posiada on rozszerzenia i mogę go tylko otworzyć po przez program Notepad++.
Po otwarciu tego pliku w wyżej wspomnianym programie można ujrzeć taki tekst:

{“status”:200,“msg”:“OK”,“result”:{“extid”:“8472938”,“email”:“pewny@email.pl”,“signup_at”:“2015-09-12 07:48:21”,“balance”:“127.67463”}}

Dowiedziałem się, że jest to “odpowiedź” z serwera w języku JSON.

Teraz główne pytanie…
Jak zrobić, by ta “odpowiedź” nie pobierała się na PC’eta, tylko wyświetlała treść tego pliku bezpośrednio na stronie?
Chodzi mi tylko o to by pokazywała tą część:

“balance”:“127.67463”

bo reszta zawartości pliku jest mi zbędna.

Za pomoc będę bardzo wdzięczny ;>

#2

Nie mogę się rozpisać poszukaj pod hasłami: javascript, ajax, json_parse ewentualnie wesprzyj się jQuery funkcją ajax lub get.

#3

Kurcze właśnie sobie o tym czytałem, ale jakość nie mogę skleić tego w całość :frowning:
Pomożesz?

#4

To nie jest trudne, popatrz na przykłady:
https://api.jquery.com/jquery.get/
http://api.jquery.com/jquery.getjson/

druga funkcja wywołuje tak naprawdę pierwszą tylko że ma ustawiony ostatni argument pierwszej funkcji czyli typ oczekiwanych danych od serwera.

Pobaw się też przykładami działającymi tutaj: https://www.w3schools.com/jquery/ajax_getjson.asp

1 polubienie
#5

Przy takim kodzie:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("https://api.pewnastrona.pl/8/account/info?login=8472938&key=g8dje4bn", function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

po kliknięciu w button “Get JSON data” wyświetla mi tylko:

200 OK [object Object]

czyli tylko tą część kodu:

{“status”:200,“msg”:“OK”}

Czemu nie wyświetla reszty?

#6

Może inaczej zapiszę Ci Twoją przykładową odpowiedź z serwera, w tym momencie rozchodzi się tylko o to byś załapał jak “obsługiwany” jest obiekt json.

Twoja cała odpowiedź z serwera:

{"status":200,"msg":"OK","result":{"extid":"8472938","email":"pewny@email.pl","signup_at":"2015-09-12 07:48:21","balance":"127.67463"}}

Ta sama odpowiedź, ale zapisana bardziej “po ludzku”

{
	"status":200,
	"msg":"OK",
	"result":
		{
			"extid":"8472938",
			"email":"pewny@email.pl",
			"signup_at":"2015-09-12 07:48:21",
			"balance":"127.67463"
		}
}

Teraz widać że odpowiedź zawiera 3 wartości/zmienne o nazwach: status, msg i result. One wszystkie są w JS zapisane w zmiennej result - tak ją nazwałeś, ta nazwa nie ma nic wspólnego z ostatnią wartością o nazwie result. Dla wszystkich elementów zmiennej result wykonywałeś w pętli wyświetlenie, elementami zmiennej result są właśnie status, msg i result. Wyświetliło Ci to 200 OK czyli przypisaną otrzymane wartości z serwera o nazwie status i msg, ostatni był kolejny obiekt json o nazwie result (tym razem ten z serwera) ponieważ jest to obiekt masz informację [object Object]. Czyli wszystko się zgadza.

Jeśli chcesz wyświetlić konkretną wartość to dobierasz się do niej w następujący sposób (pierwsza nazwa to nazwa zmiennej w JavaSCript obiektu JSON którego zwrócił serwer):

result.msg; // otrzymasz wartość OK
result.result.email; // pewny@email.pl

Jestem strasznie zmęczony, jeśli nie wytłumaczyłem tego w jasny sposób musisz poszukać na internecie przykładów z obiektami JSON, na w3school na 100% są fajne przykłady (https://www.w3schools.com/js/js_json_intro.asp).

3 polubienia
#7

Problem powstał chyba dlatego, że korzystałeś z bardzo prostych przykładów, a u Ciebie dane JSON były bardziej rozbudowane (zamiast obiektu z poszczególnymi polami/wartościami był rozbudowany obiekt zawierający też kolejne obiekty, w tym jeden o nazwie “result”).
Zastąp w swoim kodzie linię
$.each(result, function(i, field){
na poniższą
$.each(result.result, function(i, field){
a wtedy dostaniesz listę oczekiwanych wartości.
A jak Cię interesuje wypisanie wartości pola “balance” to użyj takiego kodu

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("https://api.pewnastrona.pl/8/account/info?login=8472938&key=g8dje4bn", function(result){
            $("div").text(result.result.balance);
        });
    });
});
1 polubienie
#8

Wielkie dzięki @Fizyda i @Pablo_Wawa za pomoc - jesteście wielcy ;>

1 polubienie
#9

Wydzielono 6 postów tworząc nowy wątek: Json problem z kodem