Filtrowanie pliku json przeza ajax

Od kilku dobrych godzin zmagam się z przykładem prostego zastosowania funkcji dataFilter w ajax(). Cały czas albo pojawiają się błędy odczytu pliku lub nie wyświetla nic. Wiem, że najczęściej używana jest funkcja success lub complete aczkolwiek w sieci też nie ma zbyt wiele pomocy pod kątem dataFilter. Na razie mam coś takiego :

{"8":"vacation","7":"birthday","5":"summer","4":"2013","3":"2014","6":"winter","2":"2015","1":"2016"}

var database = 'retData.json';

$(document).ready(function(){
  $("#buttonWithAction").click(function(){
      var receivedData = $.ajax(database, {
          contentType : 'application/json',
          dataType : 'json',
          timeout : 500, 

          'dataFilter': function(database, json) {
              data = [];
              $.map(database, function(value, key) {
              console.log('indx=i' + key + ', value=' + value);
              node = {
                  'id': 'i' + key,
                  'text': value,
                  'icon': '/',
                  'data': value, //'metadata' :  value,
                  'state': {
                  'opened': false
                  },
                  'children': true
              }
              data.push(node);
              console.log(data);
              });
          }
      });
});
});

Gdyby ktoś mógłby podpowiedzieć gdzie leży błąd. Może to kwestia złego przetwarzania pliku. Może błędne użycie funkcji map().

delform_17 napisał(a):

Od kilku dobrych godzin zmagam się z przykładem prostego zastosowania funkcji dataFilter w ajax(). Cały czas albo pojawiają się błędy odczytu pliku lub nie wyświetla nic. Wiem, że najczęściej używana jest funkcja success lub complete aczkolwiek w sieci też nie ma zbyt wiele pomocy pod kątem dataFilter.

Bo robisz to staroświeckimi metodami. Teraz prędzej będzie dużo w necie o funkcji fetch (dostępna w przeglądarce bez żadnej biblioteki) https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
a filtrować można przez .filter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Cały czas albo pojawiają się błędy odczytu pliku lub nie wyświetla nic.

Jakie dokładnie masz błędy? Bo jak błędy pobrania pliku z sieci, to problem leży gdzie indziej niż w kodzie JSa.

Może błędne użycie funkcji map().

odwołujesz się do zmiennych data i node, które nie są nigdzie zadeklarowane, może to to?
Zamień sobie na

const data = [];

i

const node = {

no i weź to jakoś poformatuj (porób entery i wcięcia we właściwych miejscach), bo teraz nie widać nawet, czy wszystkie nawiasy i klamerki są zamknięte odpowiednio.

"ajax" heh, nie słyszałem tej nazwy już chyba z 8 lat

Wiem iż tego typu metody istnieją, bo blogów nieco jest o tym aczkolwiek chciałem spróbować wykorzystać te funkcję. Więc nie wiem czy ktoś jest mi w stanie schematyczne pokazać jak dataFilter można by użyć. Chyba, że lepiej było by to zrobić np poprzez success. poza tym ajax jest częścią pytań na rozmowie dla Juniorów.

AJAX to obecnie nic nie znaczący slogan. Żeby zrozumieć znaczenie tego słowa, trzeba się cofnąć o kilkanaście lat i prześledzić historycznie wszystkie zmiany, jakie się dokonały. Pierwotnie AJAX służył to do przesyłania XML (stąd X w skrócie AJAX), JSON to późniejszy wynalazek. Ale format danych to drobiazg. Problem zaczynał się wtedy, kiedy trzeba było odpalić zapytanie. I tu zaczynała się zabawa, bo w każdej przeglądarce inaczej https://en.wikipedia.org/wiki/XMLHttpRequest ale jak to ustandaryzowali, to dalej się to niewygodnie obsługiwało (tam różne stany były)

I tutaj wchodzi jQuery całe na biało. Biblioteka powstała w 2006 roku, która między innymi ułatwiała korzystanie z AJAX. Przez kilka późniejszych lat AJAX zaczął być buzzwordem, ponieważ na tamte warunki okazało się, że wiele stron może przyśpieszyć swoje działanie i zwiększyć dynamizm przez odwoływanie się bez przeładowania strony. jQuery było bohaterem internetu, bo naprawdę ułatwiało pracę wtedy (szczególnie, że rozwiązywało problem z kompatybilnością przeglądarek również w innych kwestiach)

później natomiast weszły biblioteki takie jak AngularJS czy React, które zaczęły sprawiać, że przydatność jQuery do manipulacji DOMem nie była już taka atrakcyjna (bo do DOMu jest framework) a ogłoszenia pracy zamiast AJAX zaczęły wymagać SPA. Ponadto w przeglądarkach pojawiła się funkcja fetch do obsługi "ajaxa" i już w ogóle używanie jQuery przestało się opłacać. Samo jQuery jest dalej używane, ale raczej są to rzeczy low-profile. Dlatego jak chcesz się czegoś nauczyć, to lepiej się nauczyć obsługi choćby fetch niż używania ajax przez jQuery

no i mody się zmieniły i tak jak AJAX był modnym buzzwordem koło 2010, SPA koło 2015, to teraz modnym buzzwordem jest SSR(Server-side-rendering), czyli przeciwieństwo AJAXa (powrót do renderowania po stronie serwera). Co nie znaczy, że samych technik "ajaxowych" nie warto poznać. Wszystko może się przydać, tylko pewien rys historyczny warto znać.

LukeJL napisał(a):

AJAX to obecnie nic nie znaczący slogan. Żeby zrozumieć znaczenie tego słowa, trzeba się cofnąć o kilkanaście lat i prześledzić historycznie wszystkie zmiany, jakie się dokonały. Pierwotnie AJAX służył to do przesyłania XML (stąd X w skrócie AJAX), JSON to późniejszy wynalazek. Ale format danych to drobiazg. Problem zaczynał się wtedy, kiedy trzeba było odpalić zapytanie. I tu zaczynała się zabawa, bo w każdej przeglądarce inaczej https://en.wikipedia.org/wiki/XMLHttpRequest ale jak to ustandaryzowali, to dalej się to niewygodnie obsługiwało (tam różne stany były)

I tutaj wchodzi jQuery całe na biało. Biblioteka powstała w 2006 roku, która między innymi ułatwiała korzystanie z AJAX. Przez kilka późniejszych lat AJAX zaczął być buzzwordem, ponieważ na tamte warunki okazało się, że wiele stron może przyśpieszyć swoje działanie i zwiększyć dynamizm przez odwoływanie się bez przeładowania strony. jQuery było bohaterem internetu, bo naprawdę ułatwiało pracę wtedy (szczególnie, że rozwiązywało problem z kompatybilnością przeglądarek również w innych kwestiach)

później natomiast weszły biblioteki takie jak AngularJS czy React, które zaczęły sprawiać, że przydatność jQuery do manipulacji DOMem nie była już taka atrakcyjna (bo do DOMu jest framework)

Tak na prawdę jQuery wzięło się stąd, żeby dało się znajdować elementy w DOM'ie selektorami CSS (bo wcześniej trzeba było robić .getElementByClassName() i iterować). Nie dało się np znaleźć .parent div.child Stąd cały pomysł na bibliotekę. Bo te "helpery" na .attr albo .style to nie wnosiły zbyt wiele. Główny sens jQuery to było właśnie "querowanie dom'u z js'a".

Jak weszło document.querySelector, to zasadność jQuery praktycznie zniknęła.

Oprócz całego sensu jQuery które zostało zepsute przez .querySelector zostały tylko dwie dobre rzeczy: .ajax oraz jquery.ui. .ajax został wyparty przez fetch(), a jquery.ui zostało wyparte przez Reacta i inne takie frameworki.