• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyszukiwanie i wyświetlanie wyników z JSON

VPS Starter Arubacloud
0 głosów
1,465 wizyt
pytanie zadane 21 maja 2017 w JavaScript przez jaco Początkujący (290 p.)
edycja 21 maja 2017 przez jaco

Cześć, 

Odbiłem się od kolejnej ściany. Mam API które ściąga mi produkty i wkleja ładnie do stronki typu GRID.
Chciałbym teraz aby można było wpisywać keyword z poziomu strony i żeby wyświetlały się stosowne wyniki.

TO mój fragment pobierający dane

 $(document).ready(function(){
        
        var serch = "xiaomi";
        var api = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/apikey?fields=productUrl,imageUrl,productTitle,salePrice&keywords=";
        var url = api + serch;
        
        $.getJSON(url, function(result){
        

Chciałbym wprowadzać zmienną serch z przeglądarki.

Próbuję z <input type="text">
ale coś mi nie wychodzi. Kilka tutoriali z YT przerobiłem ale jakoś nie chce zadziałać :/ 

komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Zamiast:

$(document).ready(function(){

, użyj $(document).on('input', 'input', function() {

http://api.jquery.com/on/

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)

Mój input jest taki:
 

<input type="text" name="search" id="key" list="search" autocomplete=off required>

Możesz mi jak krowie na rowie pokazać jak to zgrać ze sobą? Coś zaczęło się dziać po tej zmienia ale nie do końca to co bym chciał

komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Coś zaczęło się dziać po tej zmienia ale nie do końca to co bym chciał

Pokaż aktualny kod. 

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)
<input type="text" name="search" id="key" list="search" autocomplete=off required>
$(document).on('input', 'input', function() {      
        var search = document.getElementById("key").value;
        var api = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/apikey?fields=productUrl,imageUrl,productTitle,salePrice&keywords=";
        var url = api + search;


Działa ale nie do końca, po wpisaniu czegoś wyświetlają się produkty. Po zmianie wpisu już nic się nie dzieje.

Jednak działa. MEGA! dzięki!

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)

Kolejny problem jaki się pojawił:
pierwsze zapytanie do JSON daje mi zwykłe linki które muszę znów wysłać do api i dostać linki afiliacyjne. w jaki sposób to zrobić? Tak wyglądają moje linki.

 

 var url0 = (result.result.products[0].productUrl);
        var url1 = (result.result.products[1].productUrl);
        var url2 = (result.result.products[2].productUrl);
        var url3 = (result.result.products[3].productUrl);
        var url4 = (result.result.products[4].productUrl);
        var url5 = (result.result.products[5].productUrl);
        var url6 = (result.result.products[6].productUrl);
        var url7 = (result.result.products[7].productUrl);
            
        document.getElementById("url0").href = url0;
        document.getElementById("url1").href= url1;
        document.getElementById("url2").href = url2;
        document.getElementById("url3").href = url3;
        document.getElementById("url4").href = url4;
        document.getElementById("url5").href = url5;
        document.getElementById("url6").href = url6;
        document.getElementById("txt7").href = url7;

 

komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

$.getJSON() w pętli?

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)
No to brzmi jak coś co mogło by pomóc ale kolejny raz moja wiedza jest tak mała że nie wiem jak się do tego zabrać :/
komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli dobrze rozumiem, to:

var url0 = (result.result.products[0].productUrl);

i reszta zmiennych url* zawiera linki, które chcesz przesłać znowu do API, aby w odpowiedzi otrzymać listę linków afiliacyjnych, które dopiero chcesz podpinać do elementów HTML? Bo zapisy:

document.getElementById("url0").href = url0;

sugerują, że chcesz podpiąć linki z pierwszego requesta do API (czyli jeszcze nie te afiliacyjne) do elementów HTML.

Czy to Twój "skrót myślowy", że zmienne url* zawierają już odpowiedź z API, w której masz już linki afiliacyjne - czyli jedynie nie wiesz jak wielokrotnie przesłać do API zapytanie z linkami z pierwszej odpowiedzi, aby otrzymać drugą odpowiedź z linkami afiliacyjnymi?

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)
chcesz podpiąć linki z pierwszego requesta do API (czyli jeszcze nie te afiliacyjne) do elementów HTML. - dokładnie o to chodzi

Url od 0 do 7 zawierają pierwsze linki z API przypisałem im takie nazwy i chciałbym teraz je wstawić do url który znów wyślę do API za pomocą getJson i z tego odpowiedzi wyciągnąć sobię linki afiliacyjne.

1 odpowiedź

+1 głos
odpowiedź 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)
edycja 21 maja 2017 przez ScriptyChris

Żeby dalej nie ciągnąć tematu w komentarzach pod pytaniem. 

Kolejny problem jaki się pojawił: 
pierwsze zapytanie do JSON daje mi zwykłe linki które muszę znów wysłać do api i dostać linki afiliacyjne. w jaki sposób to zrobić?

Mając tablicę produktów, gdzie każdy z nich (jako obiekt) ma pole reprezentujące jego link: result.result.products, tworzysz tablicę tychże linków. Następnie na każdym odpalasz $.getJSON(), z odpowiedzi wyciągasz link afiliacyjny i dorzucasz go do tablicy tych linków. Z racji tego, że to się dzieje asynchronicznie, to zrobiłbym HTMLowy kontener na wszystkie linki, na początku go ukrył. a pokazał dopiero, gdy wszystkie linki afiliacyjne będą gotowe.

Piszesz w jQuery. Ja nie korzystam z tej biblioteki, więc "pi razy drzwi", mniej więcej taki skrypt możesz zrobić.

var products = result.result.products;
var productsAmount = products.length;
var affiliateUrls = [];
var affiliateUrlsContainer = $('#affiliateUrlsContainer');
affiliateUrlsContainer.hide();

$(products).each(function(index, product) {
  $.getJSON(product.productUrl, function(affiliateResult) {
    // zakladajac, ze link afiliacyjny jest dostepny jako { affiliateResult.url }
    var affiliateUrl = affiliateResult.url;
    affiliateUrls.push(affiliateUrl);

    var afiliateElement = $('#url' + index);
    affiliateElement.href = affiliateUrl;
    affiliateUrlsContainer.append(affiliateElement);

    if (affiliateUrls.length === productsAmount) { 
      affiliateUrlsContainer.show();
    }
  });
});

Chociaż zastanawiam się, czy można tu jakoś Promise.all() umieścić, ale nie wiem jak jQuery to wspiera, więc skrypt bardziej na piechotę.

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)

to dla mnie totalnie czarna magia co tutaj się wydarzyło teraz :/ 
nie widże nigdzie linku do API który zwraca linki affiliacyjne chyba gdzieś powinien być?

Może dało by się to zrobić jakoś na około żebym zrozumiał? np z ulr0 który aktualnie jest zwykłym linkiem zrobić pulr0 - który będzie linkiem afiliacyjnym

Link API wygląda dokładnie tak:

 

http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.getPromotionLinks/apikey?%20fields=promotionUrl&trackingId=techdealsFB&urls=


Na koniec po znaku = trzeba wprowadzić adres url0. 
Nie wiem czy powyższe rozwiązanie które dałeś działa ale ja po prostu go nie rozumiem więc nie potrafię zastosować :(

komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Ok. Mając link pod zmienną url0:

var url0 = result.result.products[0].productUrl;

posyłasz go do $.getJSON()

$.getJSON(url0, function(result) {
   console.log('Affiliated result: ', result);
});

i zobacz jak prezentuje się struktura odpowiedzi z serwera (zobaczysz to w konsoli jako "Affiliated result: "). Znajdź tam link afiliacyjny, "zbuduj" sobie "ścięzkę dostępu" do niego i z niej wydobądź link, który przypiszesz do atrybutu [href] anchora (czy jakiegoś elementu, który ma Tobie obsługiwać link).

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)
To wygląda zupełnie tak że bym to już zrozumiał 1 linijkę mam od dawna w kodzie.
wklejam to co dałeś i nie chce zadziałać :/ myślę że w złym miejscu to wklejak. Jakieś wskazówki??
komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)
Pokaż jak wygląda całość, razem z kodem który wkleiłeś.

Jakieś błędy w konsoli?
komentarz 21 maja 2017 przez jaco Początkujący (290 p.)
$(document).on('input', 'input', function() {      
        var search = document.getElementById("key").value;
        var api = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/62162?fields=productUrl,imageUrl,productTitle,salePrice&keywords=";
        var url = api + search;
        
        $.getJSON(url, function(result){         
		var img_0 = (result.result.products[0].imageUrl);
        var img_1 = (result.result.products[1].imageUrl);
        var img_2 = (result.result.products[2].imageUrl);
        var img_3 = (result.result.products[3].imageUrl);
        var img_4 = (result.result.products[4].imageUrl);
        var img_5 = (result.result.products[5].imageUrl);
        var img_6 = (result.result.products[6].imageUrl);
        var img_7 = (result.result.products[7].imageUrl);
            
		document.getElementById('img_0').src = img_0;
        document.getElementById('img_1').src = img_1;
        document.getElementById('img_2').src = img_2;
        document.getElementById('img_3').src = img_3;
        document.getElementById('img_4').src = img_4;
        document.getElementById('img_5').src = img_5;
        document.getElementById('img_6').src = img_6;
        document.getElementById('img_7').src = img_7;
            
		var pr0 = (result.result.products[0].salePrice);
        var pr1 = (result.result.products[1].salePrice);
        var pr2 = (result.result.products[2].salePrice);
        var pr3 = (result.result.products[3].salePrice);
        var pr4 = (result.result.products[4].salePrice);
        var pr5 = (result.result.products[5].salePrice);
        var pr6 = (result.result.products[6].salePrice);
        var pr7 = (result.result.products[7].salePrice);
            
        document.getElementById("pr0").innerHTML = pr0;
        document.getElementById("pr1").innerHTML = pr1;
        document.getElementById("pr2").innerHTML = pr2;
        document.getElementById("pr3").innerHTML = pr3;
        document.getElementById("pr4").innerHTML = pr4;
        document.getElementById("pr5").innerHTML = pr5;
        document.getElementById("pr6").innerHTML = pr6;
        document.getElementById("pr7").innerHTML = pr7;
            
        var txt0 = (result.result.products[0].productTitle);
        var txt1 = (result.result.products[1].productTitle);
        var txt2 = (result.result.products[2].productTitle);
        var txt3 = (result.result.products[3].productTitle);
        var txt4 = (result.result.products[4].productTitle);
        var txt5 = (result.result.products[5].productTitle);
        var txt6 = (result.result.products[6].productTitle);
        var txt7 = (result.result.products[7].productTitle);
            
        document.getElementById("txt0").innerHTML = txt0;
        document.getElementById("txt1").innerHTML = txt1;
        document.getElementById("txt2").innerHTML = txt2;
        document.getElementById("txt3").innerHTML = txt3;
        document.getElementById("txt4").innerHTML = txt4;
        document.getElementById("txt5").innerHTML = txt5;
        document.getElementById("txt6").innerHTML = txt6;
        document.getElementById("txt7").innerHTML = txt7;
            
        var url0 = (result.result.products[0].productUrl);
        var url1 = (result.result.products[1].productUrl);
        var url2 = (result.result.products[2].productUrl);
        var url3 = (result.result.products[3].productUrl);
        var url4 = (result.result.products[4].productUrl);
        var url5 = (result.result.products[5].productUrl);
        var url6 = (result.result.products[6].productUrl);
        var url7 = (result.result.products[7].productUrl);
            
        document.getElementById("url0").href = url0;
        document.getElementById("url1").href=  url1;
        document.getElementById("url2").href = url2;
        document.getElementById("url3").href = url3;
        document.getElementById("url4").href = url4;
        document.getElementById("url5").href = url5;
        document.getElementById("url6").href = url6;
        document.getElementById("url7").href = url7;
        
        $.getJSON(url0, function(result) {
   console.log('Affiliated result: ', result);
});
        
      
            });	
        });

a w konsoli

 

Uncaught TypeError: Cannot set property 'href' of null
    at Object.success (index.html:389)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at x (jquery.min.js:4)
    at XMLHttpRequest.b (jquery.min.js:4)

 

komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Popraw formatowanie swojego kodu, stosuj wcięcia, gdy kreujesz ciało nowej funkcji.

Stanowczo zbyt wiele razy powtarzasz użycie niektórych wyrażeń - stosuj DRY, korzystaj z pętli. Na przykład, taki zapis:

document.getElementById('img_0').src = img_0;
document.getElementById('img_1').src = img_1;
document.getElementById('img_2').src = img_2;
document.getElementById('img_3').src = img_3;
document.getElementById('img_4').src = img_4;
document.getElementById('img_5').src = img_5;
document.getElementById('img_6').src = img_6;
document.getElementById('img_7').src = img_7;

, możesz zastąpić takim:

var ids = ['img_0', 'img_1', 'img_2']; // wypisujesz tutaj wszystkie IDki, aż do 'img_7'
ids.forEach(id => document.getElementById(id).src = id);

// lub nieco dłuższym, ale nadal mniej redundantym
for (var i = 0, ii = ids.length; i < ii; i++) {
    var currentId = ids[i];
    document.getElementById(currentId).src = currentId;
}

i tak praktycznie w każdej grupie, w której się powtarzasz.

Błąd:

Cannot set property 'href' of null

występuje, ponieważ JS nie potrafi odnaleźć elementu (po kodzie, obstawiam, że tego z id = ulr0) - czy na pewno masz go w kodzie HTML, czy on ma być dopiero stworzony dynamicznie?

Czy:

console.log('Affiliated result: ', result);

wyświetla coś w konsoli?

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)

konsola nic nie wyświetla poza błędem 

url0 jest tylko tak określony jak w kodzie który dałem (dzięki za info o skracaniu kodu miałem tego świadomość ale dopiero się uczę i chciałem popróbować na piechotę).
 

czy to
 

document.getElementById("url0").href = url0;


Nie załatwia sprawy? w HTML: raczej nigdzie go nie mam odnoszę się do niego tylko tutaj w HTML:

<a href="" id="purl0">
								<img id="img_0"/>
								<dl>
                                    <dt><p id="txt0"></p></dt>
									<dd></dd>	
								</dl>
							</a>


a to już właściwie do tego purl który ma być linkiem afiliacyjnym bo tych zwyczajnych linków nie potrzebuję.

 

komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

W powyższym kodzie HTML nie ma elementu o [id="url0"], jest natomiast [id="purl0"], więc jeśli to jemu chcesz ustalić atrybut [href], to musisz podać prawidłowe ID dla metody .getElementById()

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)
Jeśli dobrze rozumiem muszę do mojego kodu API dodać ulr0 aby otrzymać wartość którą później przypiszę do purl0 tak?

Więc tutaj jest problem. Mogę coś przypisać do purl0 ale napierw muszę to wyciągnąć z API. A nie mam pojęcia jak to zrobić i w tym tkwi problem.
komentarz 21 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Pomińmy na razie przypisywanie URLi do elementów DOM - w ogóle nie myśl przez chwilę o HTML.

Wykonaj ten kod:

$(document).on('input', 'input', function() {      
        var search = document.getElementById("key").value;
        var api = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/62162?fields=productUrl,imageUrl,productTitle,salePrice&keywords=";
        var url = api + search;
         
        $.getJSON(url, function(result){
            var newUrl = result.result.products[0].productUrl;

            $.getJSON(newUrl, function(newResult) {
                 console.log('newResult: ', newResult);
            })
        });
});

i napisz, co wyświetli się w konsoli - czy będzie tam link afiliacyjny. Jeśli będzie problem z zawartością newUrl (bo nie wiem czy to ma być po prostu ten productUrl, czy coś jeszcze tam się znajduje), to po prostu zmodyfikuj newUrl tak, aby powstał prawidłowy adres do wykonania zapytania po ten link afiliacyjny i żeby w konsoli wypisała się nowa odpowiedź z API pod zmienną newResult.

komentarz 21 maja 2017 przez jaco Początkujący (290 p.)
 var surl = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.getPromotionLinks/apikey?%20fields=promotionUrl&trackingId=techdealsFB&urls=";    
        $.getJSON(surl + url0 + "," + url1+ "," + url2+ "," + url3+ "," + url4+ "," + url5+ "," + url6+ "," + url7, function(result) {
        console.log('Affiliated result: ', result); 
            var purl0 = (result.result.promotionUrls[0].promotionUrl);
            var purl1 = (result.result.promotionUrls[1].promotionUrl);
            var purl2 = (result.result.promotionUrls[2].promotionUrl);
            var purl3 = (result.result.promotionUrls[3].promotionUrl);
            var purl4 = (result.result.promotionUrls[4].promotionUrl);
            var purl5 = (result.result.promotionUrls[5].promotionUrl);
            var purl6 = (result.result.promotionUrls[6].promotionUrl);
            var purl7 = (result.result.promotionUrls[7].promotionUrl);
            
            document.getElementById("purl0").href = purl0;
            document.getElementById("purl1").href = purl1;
            document.getElementById("purl2").href = purl2;
            document.getElementById("purl3").href = purl3;
            document.getElementById("purl4").href = purl4;
            document.getElementById("purl5").href = purl5;
            document.getElementById("purl6").href = purl6;
            document.getElementById("purl7").href = purl7;

 

Udało mi się to przeskoczyć wielkie dzięki za pomoc! Teraz zabiorę się za optymalizację. Może komuś to pomoże dlatego wrzucam mój kod.

Dzięki za pomoc!

komentarz 22 maja 2017 przez jaco Początkujący (290 p.)
for (var i = 0, ii = ids.length; i < ii; i++) {
    var currentId = ids[i];
    document.getElementById(currentId).src = currentId;
}

 

Spróbowałem to zrobić ale niestety nie działła, konsola nie zwraca żadnej informacji. Jakieś wskazówki?

komentarz 22 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Gdzie umieściłeś ten kod? Czym jest u Ciebie zmienna ids?

komentarz 22 maja 2017 przez jaco Początkujący (290 p.)
aha ... czyli czym ma być ids? Ja tylko tamto wywaliłem a to wstawiłem :] - tak wiem mój poziom jest żenujący no ale nie za bardzo to czuję jeszcze.
komentarz 22 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Co chcesz teraz konkretnie zrobić?

Sugerując się poprzednim Twoim komentarzem z kodem:

var purl0 = (result.result.promotionUrls[0].promotionUrl);

  // ... //

document.getElementById("purl0").href = pulr0

// ... //

Najbardziej zrozumiała będzie dla Ciebie pętla wykonująca się osiem razy, w której do elementu o ID (zawierającym konkatenację tekstu "pur" oraz indeksu) dopiszesz odpowiedni URL produktu. Czyli:

for (var i = 0; i < 8; i++) {
  document.getElementById("pur" + i).href = result.result.promotionUrls[i].promotionUrl;
}

Indeks tej pętli będzie miał wartości od 0 do 7 (razem z 7), dzięki czemu ośmiu elementom (pamiętaj, że indeksy numeruje się od zera) przypiszesz osobny URL.

komentarz 22 maja 2017 przez jaco Początkujący (290 p.)
Chcę tylko usprawnić kod.

Wklejam to co dajesz ale nie działa :/ gdzie to wkleić? w miejsce tych moich 8 linijek?
komentarz 22 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Wklej tą pętle zamiast linijek z tworzeniem zmiennych i późniejszym ustawianiu atrybutu [src] z tego komentarza.

komentarz 22 maja 2017 przez jaco Początkujący (290 p.)
nagle pojawia się:

Uncaught TypeError: Cannot read property 'imageUrl' of undefined

Przecież nic z Image Url nie zmieniliśmy?
komentarz 22 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Czy nie użyłeś pętli do tego kodu? Tutaj pobierasz pole promotionUrl, a tam odnosisz się do innego pola obiektu (właśnie imageUrl), stąd błąd.

komentarz 22 maja 2017 przez jaco Początkujący (290 p.)

właśnie nie :/ 

wszystko działa -> 
zamieniam:
 

var purl0 = (result.result.promotionUrls[0].promotionUrl);
            var purl1 = (result.result.promotionUrls[1].promotionUrl);
            var purl2 = (result.result.promotionUrls[2].promotionUrl);
            var purl3 = (result.result.promotionUrls[3].promotionUrl);
            var purl4 = (result.result.promotionUrls[4].promotionUrl);
            var purl5 = (result.result.promotionUrls[5].promotionUrl);
            var purl6 = (result.result.promotionUrls[6].promotionUrl);
            var purl7 = (result.result.promotionUrls[7].promotionUrl);
            
            document.getElementById("purl0").href = purl0;
            document.getElementById("purl1").href = purl1;
            document.getElementById("purl2").href = purl2;
            document.getElementById("purl3").href = purl3;
            document.getElementById("purl4").href = purl4;
            document.getElementById("purl5").href = purl5;
            document.getElementById("purl6").href = purl6;
            document.getElementById("purl7").href = purl7;

na 

for (var i = 0; i < 8; i++) {
  document.getElementById("pur" + i).href = result.result.promotionUrls[i].promotionUrl;
}


I pojawia się błąd o img ;/ zupełnie nie rozumiem
 

komentarz 22 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Może to literówka przy przekazywaniu id: pur => purl? Popraw, jeśli jest tam literówka.

Czy w konsoli określona została linijka, w której tkwi błąd? Możesz ją pokazać?

komentarz 23 maja 2017 przez jaco Początkujący (290 p.)
Tak to było to! Dzięki twoja pomoc jest nieoceniona :)
komentarz 23 maja 2017 przez jaco Początkujący (290 p.)

Ok zacząłem sobie układać kod -> wszystko super śmiga ale wiąż po dodaniu tej jednej pętli do purl mam w konsoli taki błąd:

 

Uncaught TypeError: Cannot read property 'imageUrl' of undefined

przy konkretniej tej linijce:

 

var img_0 = (result.result.products[0].imageUrl);


O co może chodzić?

komentarz 23 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Sprawdź co siedzi wewnątrz tego:

result.result.products[0]

, być może ten element tablicy jest pusty.

komentarz 23 maja 2017 przez jaco Początkujący (290 p.)
edycja 25 maja 2017 przez jaco
consol.log wydaje prawidłowy link :( generalnie wszystko działa ale błąd się pojawia :/
komentarz 23 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

chyba nie

 "Chyba" to za mało. Upewnij się, czy result.result.products[0] jest zdefiniowane, nie jest puste i zawiera szukane pole - po prostu wyświetl to w konsoli. Jeśli będzie tam obiekt, to wyświetl w konsoli pole imageUrl. Jeśli i to się powiedzie, to sprawdź czy nie zrobiłeś gdzieś literówki.

ale wiąż po dodaniu tej jednej pętli do purl mam w konsoli taki błąd

To w końcu ten błąd występuje dla pętli, czy dla linijki var img_0 = (result.result.products[0].imageUrl); ?

Pytanie pomocnicze: 

Zmienna result jest zmienną lokalną dla anonimowej funkcji - więc nie powinno być problemu z powtarzaniem tej samej nazwy w innych metodach $.getJSON(). Możesz - dla zwiększenia czytelności kodu - nazywać zmienną w taki sposób, aby bardziej pasowała do contentu, który spodziewasz się dostać, np.: productsResult, imagesResult itd. 

komentarz 10 czerwca 2017 przez jaco Początkujący (290 p.)

Po długiej przerwie chciałbym wrócić do tematu i pewnej zmiany dokonać 

 $(document).on('input', 'input', function() {      
        var search = document.getElementById("key").value;
        var api = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/62162?fields=productUrl,imageUrl,productTitle,salePrice&highQualityItems=yes&volumeFrom=100&keywords=";
        var url = api + search;
        
        $.getJSON(url, function(result){         
	
            
               for (var i = 0; i < 20; i++) {
  document.getElementById("img_" + i).src = result.result.products[i].imageUrl;
}
            
		
            
                           for (var i = 0; i < 20; i++) {
  document.getElementById("pr" + i).innerHTML = result.result.products[i].salePrice;
}
            
        
            
                                       for (var i = 0; i < 20; i++) {
  document.getElementById("txt" + i).innerHTML = result.result.products[i].productTitle;
}

Chodzi o zmienną search. Na dziś działa to tak że wyszukuje słowa z wyszukiwarki a chciałbym zrobić zwykłe menu np telefon i po naciśnięciu var search = mobile

 

próbowałem coś z onclick ale nie wychodziło mi, dacie jakieś wskazówki?

 

komentarz 10 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

chciałbym zrobić zwykłe menu np telefon i po naciśnięciu var search = mobile

Nie rozumiem. Co masz na myśli przez "zwykłe menu np. telefon"? Chcesz mieć przycisk, który po kliknięciu uruchomi tą funkcję i ustawi zmienną search na wartość "mobile"?

komentarz 11 czerwca 2017 przez jaco Początkujący (290 p.)

Dokładnie tak, chcę zrobić menu np nie wiem
telefon, samochód, portfel, odzież

po kliknięciu każdego zmieni się wartość zmiennej search tak samo jak teraz zmienia się po wpisywaniu tekstu. Moje umiejętności starczają tylko na to, żeby zrobić dla każdego wyboru osobną kopię strony i odsyłać do nich ale to chyba nie jest zbyt mądre. 

komentarz 11 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Dodaj do HTML przyciski <input type="button">, gdzie będziesz dodawać atrybut value, w którym wpiszesz: "phone", "car", "wallet", "clothes". W JavaScript tą funkcję, którą wywołujesz w handlerze przenieś wyżej i nazwij ją jakoś (żeby nie była anonimowa), zaś do handlera przekaż jej referencję. Dodaj jeszcze handler na event click (do niego przekaż tą samą referencję). Tylko wtedy w:

var search = document.getElementById("key").value

zastąp document.getElementById("key") pobraniem targetu eventa i powinno działać.

komentarz 11 czerwca 2017 przez jaco Początkujący (290 p.)
handler ? Nie rozumiem niestety :( możesz tak bardziej dla laika to wyłożyć?
komentarz 11 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)
function eventHandler(event) {
    var search = (event && event.target.value) || document.getElementById( "key" ).value;
    var api = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/62162?fields=productUrl,imageUrl,productTitle,salePrice&highQualityItems=yes&volumeFrom=100&keywords=";
    var url = api + search;

    $.getJSON( url, function( result ) {
        for ( var i = 0; i < 20; i++ ) {
            document.getElementById( "img_" + i ).src = result.result.products[ i ].imageUrl;
        }

        for ( var i = 0; i < 20; i++ ) {
            document.getElementById( "pr" + i ).innerHTML = result.result.products[ i ].salePrice;
        }

        for ( var i = 0; i < 20; i++ ) {
            document.getElementById( "txt" + i ).innerHTML = result.result.products[ i ].productTitle;
        }
    } );
}

$( document ).on( 'input', 'input', function() {
    eventHandler(null);
});

$( document ).on( 'click', eventHandler);

Event handler, to funkcja bądź metoda, którą uruchamia określony listener, gdy zostanie wywołany przez event, którego nasłuchuje.

W powyższym kodzie ostatnia linijka powinna nasłuchiwać wszystkich "klików" na stronie. Nie wiem, czy chcesz jakoś dodatkowo to ograniczać. W każdym razie, zdarzenia typu input będą uruchamiać funkcję eventHandler() bez przekazania zdarzenia, przez co w zmiennej search będziesz miał dostępne to co było do tej pory, czyli wartość propertisa value elementu #key. Event handler dla klików odpali Ci natomiast tą samą funkcję, tyle że przekaże już obiekt zdarzenia. Wtedy zmienna search otrzyma wartość z klikniętego przycisku <input type="button">

komentarz 15 czerwca 2017 przez jaco Początkujący (290 p.)

Super działa! Brakuje tylko linków. Podpowiesz mi jak to naprawić?

 

 var url0 = (result.result.products[0].productUrl);
        var url1 = (result.result.products[1].productUrl);
        var url2 = (result.result.products[2].productUrl);
        var url3 = (result.result.products[3].productUrl);
        var url4 = (result.result.products[4].productUrl);
        var url5 = (result.result.products[5].productUrl);
        var url6 = (result.result.products[6].productUrl);
        var url7 = (result.result.products[7].productUrl);
        var url8 = (result.result.products[8].productUrl);
        var url9 = (result.result.products[9].productUrl);
        var url10 = (result.result.products[10].productUrl);
        var url11 = (result.result.products[11].productUrl);
        var url12 = (result.result.products[12].productUrl);
        var url13 = (result.result.products[13].productUrl);
        var url14 = (result.result.products[14].productUrl);
        var url15 = (result.result.products[15].productUrl);
        var url16 = (result.result.products[16].productUrl);
        var url17 = (result.result.products[17].productUrl);
        var url18 = (result.result.products[18].productUrl);
        var url19 = (result.result.products[19].productUrl);
            
            
            
                  
        
        var surl = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.getPromotionLinks/62162?%20fields=promotionUrl&trackingId=techdealsFB&urls=";    
        $.getJSON(surl + url0 + "," + url1+ "," + url2+ "," + url3+ "," + url4+ "," + url5+ "," + url6+ "," + url7+ "," + url8+ "," + url9+ "," + url10+ "," + url11+ "," + url12+ "," + url13+ "," + url14+ "," + url15+ "," + url16+ "," + url17+ "," + url18+ "," + url19, function(result2) {
            for (var i = 0; i < 20; i++) {
  document.getElementById("purl" + i).href = result2.result.promotionUrls[i].promotionUrl;

 

 

Domyślam się że tego fragmentu brakuje w tej funkcji. Jak ją doklejam wyrzuca mi serię błędów z nawiasami a usuwanie ich do niczego nie prowadzi :(

komentarz 15 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)
Pokaż całość kodu (funkcja z umieszczonym skryptem z poprzedniego komentarza) i dokładną treść (może być jako screen) błędu.
komentarz 15 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Błędu brak 

Przecież: 

Domyślam się że tego fragmentu brakuje w tej funkcji. Jak ją doklejam wyrzuca mi serię błędów z nawiasami

Dlatego poprosiłem Cię o pokazanie tego błędu.

Spróbuj tego:

function eventHandler(event) {
  var search = (event && event.target.value) || document.getElementById("key").value;
  var api = "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/62162?fields=productUrl,imageUrl,productTitle,salePrice&highQualityItems=yes&volumeFrom=100&keywords=";
  var url = api + search;
  var urlArray = [];

  $.getJSON(url, function(result) {
    for (var i = 0; i < 20; i++) {
      document.getElementById("img_" + i).src =
        result.result.products[i].imageUrl;

      document.getElementById("pr" + i).innerHTML =
        result.result.products[i].salePrice;

      document.getElementById("txt" + i).innerHTML =
        result.result.products[i].productTitle;

      urlArray.push(result.result.products[i].productUrl);
    }

    var commaSeparatedUrls = urlArray.join();

    var surl =
      "http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.getPromotionLinks/62162?%20fields=promotionUrl&trackingId=techdealsFB&urls=";
    $.getJSON(surl + commaSeparatedUrls, function(result2) {
      for (var i = 0; i < 20; i++) {
        document.getElementById("purl" + i).href =
          result2.result.promotionUrls[i].promotionUrl;
      }
    });
  });
}

$(document).on("input", "input", function() {
  eventHandler(null);
});

$(document).on("click", eventHandler);

P.S. Staraj się stosować znaki interpunkcyjne, ponieważ trudno zrozumieć co napisałeś wyżej.

komentarz 16 czerwca 2017 przez jaco Początkujący (290 p.)
Masz rację, sam ciężko miałem się połapać czytając drugi raz.
Ok, wszystko super działa. Oczywiście kolejny problem nastąpił.
Zmienna serch którą zmieniamy klikami w buttony jest na początku pusta :(.
Tak absolutnie nie może to zostać, jak się do tego zabrać? Próbowałem na twardo zadać var = ale coś nie zagrało.
komentarz 16 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Wykonsoluj event przed deklaracją zmiennej search i pokaż co wypisało - zobacz czy event.target.value ma jakąś wartość.

Próbowałem na twardo zadać var = ale coś nie zagrało

Tzn? Przecież tam jest zadeklarowane var search

komentarz 16 czerwca 2017 przez jaco Początkujący (290 p.)
Dodałem console.log(event.target.value);

otwieram stronę jest pusto w logu. Po klikaniu w buttony w logu pojawiają się kolejne słowa.
komentarz 16 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Czyli jest ok - po klikaniu w przyciski odpalana jest funkcja eventHandler z przekazanym eventem i widzisz wartość z klikniętego przycisku. Więc dlaczego zmienna na początku miała by być pusta? Ona będzie pusta dopóki nie klikniesz w przycisk <input type="button"> z określoną wartością w atrybucie [value] (przyciski bez tego atrybutu oczywiście nie będą uzupełniać zmiennej search, a zamiast tego odczytana zostanie wartość z document.getElementById("key").value) lub nie wprowadzisz jakiejś wartości w element #key (musi to być <input type="text">)

komentarz 16 czerwca 2017 przez jaco Początkujący (290 p.)
Kurcze mam bardzo małe doświadczenie w tych tematach i ciężko mi się chyba precyzyjnie wysłowić.

Na teraz wszystko działa ok poza tym, że po odpaleniu strony jest pusto. Niestety widać ramki z grida i wygląda to brzydko.

Chciałbym je już na starcie wypełnić wynikami z jsona. Jak tylko kliknę jakikolwiek button już jest wszystko ok. Chcę tylko uniknąć tego, że wchodzi się na pustą rozwaloną stronę.
komentarz 16 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Żeby uzyskać dane już po uruchomieniu apki, musisz przypisać jakąś wartość do zmiennej search - taką która po wysłaniu do API zwróci Ci wyniki. Możesz zrobić coś takiego na starcie apki (nie jest to ani czyste ani dobre rozwiązanie - bo w pewnym sensie zasymuluje strukturę obiektu zdarzenia - ale na Twój użytek powinno działać):

var initialValueObj = { 
    target: {
        value: /* TUTAJ WPISZ WARTOŚĆ, KTÓRA UMOZLIWI POZYSKANIE WYNIKÓW Z API */
    }
};

eventHandler( initialValueObj );

 

komentarz 16 czerwca 2017 przez jaco Początkujący (290 p.)
Dokładnie o to chodziło!
MEGA! No to czekamy aż wymyślę kolejny problem :)
komentarz 16 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)
Gratuluję :)

Jeśli napotkasz kolejne problemy, to załóż proszę nowy temat - tu już za dużo komentarzy się namnożyło.

Podobne pytania

0 głosów
1 odpowiedź 455 wizyt
pytanie zadane 20 czerwca 2020 w PHP przez Bakkit Dyskutant (7,600 p.)
+1 głos
3 odpowiedzi 451 wizyt
pytanie zadane 5 marca 2016 w JavaScript przez BlvckFox Gaduła (4,240 p.)
0 głosów
1 odpowiedź 1,571 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...