• 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 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,570 wizyt

92,452 zapytań

141,262 odpowiedzi

319,079 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!

...