Json in HTML einbinden und Filtern -Basic-

[binatown]

Hallo,

kurz zu meinem Problem, das sollte recht Basic sein, jedoch ist es nicht mein Gebiet und mein Hirn dampft schon ziemlich durch die Internetrecherche.

Ich soll zu Schulungszwecken eine vorhanden JSON Datenbank ( ca 5000 EInträge) auf eine HTML Seite bringen. Bei so vielen Einträgen wäre ja eine Filterfunktion ganz nützlich.
Ich dachte mir 3x dieses Dropdown Menü.

HTML:
<div id="content">
<section class="formular">
<form action="#">

<label for="produkt">Was möchten Sie suchen?</label>
<select id="produkt" name="produkt">
<option value="">bitte ausw&auml;hlen</option>

<option value="audio" id="preis2">Modell</option>

<option value="video" id="preis3">Baujahr</option>

<option value="video" id="preis3">Marke</option>
</select> <br>

<input type="button" value="ok" id="confirm" onclick="ok()">
<br>

Die Frage ist jetzt wie ich auf die externe Json Datei zugreife, da ich nicht die Javascript Datei mit 400000 Zeilen Daten vollpacken will und wie ich die Filterfunktion realisieren sodass die einfach alles nicht ausgewählte nicht anzeigt.
Es wäre schön wenn mir irgendjemand helfen oder Denkanstöße geben könnte, da ich das ein Semester in meinem Studium hatte und das schon einige Abende her ist.

Ausserdem hat jeder der tausende von einträgen eine ID, die geht von 1 - 900. jetzt würde ich gerne mit einem
HTML:
<input type = "text" name="ID" value="">

textfeld die genaue ID Filtern und diesen Datenbankeintrag ausgeben. Sprich, Zahl eingeben Datenbank Eintrag Ausgeben.
Das sollte doch recht einfach sein oder?
P.S. Bitte ohne Entwicklungstool oder zusätzlicher/externer Software

Vielen Dank für die Hilfe

 

[Nafi]

Was genau ist denn nun die Frage? Bzw wo hängt es denn?

Die Externe Json-Datei kannst du per XMLHttpRequest herunterladen.
Den Textinhalt der Response dann mit JSON.parse() zu einem Objekt oder Array parsen, je nachdem wie deine Daten so vorliegen.
Anschließend iterierst du über deine Daten und zeigst diese auf der Webseite an. z.B. als Tabelle.

Die Filterlogik kannst du entweder umsetzen, indem du das Array filterst und die Tabelle mit den Daten dann neu aufbaust, oder indem du die herausgefilterten Zeilen einfach per CSS ausblendest.

 

[binatown]

Vielen Dank für Die Antwort.
Leider sehe ich keinen Weg so eine Filterfunktion einzubauen. Habe es nach Stundenlanger Recherche geschafft die kompletten Daten als Tabelle auf die Website zu bekommen, bei 40000 Einträgen aber sehr umständlich Ich schaffe es auch nicht diese Tabelle in css zu formatieren dass sie X groß und lang ist oder Scrollbar. Nun lädt die Website sek und spuckt mir eine tabelle mit1500 Zeilen aus die 1cm groß sind.


Ich bin mir sicher dass es relativ einfach ist, aber ich finde nichts.
Im Sinne: gebe mir ID: "XX" in Tabelle aus.

Ist das Verständlich?

 

[netzgestaltung]

Es gibt eine einfache suchfeld JS filtermöglichkeit und zb lassen sich per klick auf tags suchfelder mit JS befüllen, zb mit jquery.livefilter (benötigt jQuery) und einem click event (das hab ich jetzt aus einem sehr alten projekt entnommen):

;(function($){
  $(document).on('ready', function(){
    $('#content').liveFilter('#filter-input', '.filter-row');
    $('.term a').on('click', function(event){
      var searchValue = $(this).text();

      $('#filter-input').val(searchValue).keyup();
      event.preventDefault();
    });
  });
})(jQuery);

Dazu könnte ein HTML so aussehen:

<main id="content">
  <input id="filter-input" name="filter-input" placeholder="Gib was zum Filtern ein" value="" />
  <ul class="terms-list">
    <li class="term"><a href="#term-name">Term Name</a></li>
    <li class="term"><a href="#term-name2">Term Name2</a></li>
  </ul>
  <table>
    <tr class="filter-row" id="term-name">Ich werde gezeigt wenn Term Name gewählt wird.</tr>
  </table>
</main>

Zusätzlich kann man auch einfach das Suchfeld nutzen lassen.

Das ganze geht bestimmt auch ohne jQuery, aber da hab ich jetzt nix zu kopieren da. Das gezeigte ist aus 2012....

 

[binatown]

Ich kenne mich nicht mit jQuery aus, wollte es vermeiden, aber es sieht relativ einfach aus, werde mich morgen mal reinlesen. Danke

 

[netzgestaltung]

Ich merk auch grad, das ich das laaaang nicht mehr so benutzt habe. vielleicht bin ich ja morgen für ein update motiviert ;-) derweil hab ich das noch vervollständigt.

Ergänzung (17. März 2021)

was anderes - für responsive tabellen gibt es ein paar standard-wege: https://css-tricks.com/accessible-simple-responsive-tables/

ich bevorzuge, aber das kann je nach inhalt variieren, die scroll methode weil sie besonders simpel ist, das reicht oft aus.
mein obiges beispiel weitergeführt:

<main id="content">
  <input id="filter-input" name="filter-input" placeholder="Gib was zum Filtern ein" value="" />
  <ul class="terms-list">
    <li class="term"><a href="#term-name">Term Name</a></li>
    <li class="term"><a href="#term-name2">Term Name2</a></li>
  </ul>
  <div class="table-wrapper">
    <table>
      <tr class="filter-row" id="term-name">Ich werde gezeigt wenn Term Name gewählt wird.</tr>
    </table>
  </div>
</main>

.table-wrapper{
  overflow-x:auto;
}

wenn das nicht reicht hilft nur einlesen oder die tabelle umstrukturieren, zb achsen swap (könnte es auch eine liste sein?)

 

[RalphS]

Problem ist halt, daß das einfügen eines Knotens per DOM sehr lange dauert. Zehntausende Zeilen sind einfach zuviel. Da wartet man zu lange.

Je nachdem wie das ausgeliefert wird- lokal oder per Webserver- mag es die bessere Idee sein, einfach eine php oder sonst vom Server ausführbare Datei zu basteln, diese die json Daten parsen zu lassen und dann via Parametrisierung nur die gefilterten Daten zurückzugeben, entweder wieder als json oder als irgendwas anderes.

Rein lokal ist wohl sowas wie jquery die einfachste Option, da Browserabhängigkeiten kaschiert werden und man mit relativ wenig Code zum Ziel kommt.

Den livefilter kenn ich jetzt nicht, aber im Zweifel geht es auch ohne, wenn die Abhängigkeiten möglichst klein bleiben sollen.

 

[binatown]

Nach Stundenlangem Suchen und machen bin ich glaube ich auf einem guten Weg. habe einen Code gefunden der mit einer Auswahlbox verschiedene Möglichkeiten Filtert. Das habe Ich versucht auf mein Fall anzuwenden. Kann mir einer sagen wie ich meinen onclick Handler

 <input type = "text" name="Nummer" value="">
<button type="button" onclick="showItems(this.value)">Bestätigen</button>

da Rein bekomme? Also was ich machen müsste, dass die .js Die Zahl als Suchwert übergibt?

Ich finde leider das Problem nicht.

var headerfill = document.getElementById('kopf');
var sectionfill = document.getElementById('inhalt');
var requestURL = 'Data/ToS.json';
var coll;

var request = new XMLHttpRequest();
request.open('GET', requestURL, true);
        request.responseType = 'json';
        request.send();

        request.onload = function() {
        coll = request.response;
        populateHeader();
    }
   
function showItems(input) {
    var i;
    var choice = input;
    sectionfill.innerHTML = "";
    var items = coll.TableOfSites.item;
    console.log('Alle meine Items: ', items);
   
    var filteredItemArray = items.filter(function (dummy) {
        return dummy.format === choice;
    });
    console.log('ausgewählte Items: ', filteredItemArray);
   
    var arrayLength = filteredItemArray.length;
    for (i = 0; i < arrayLength; i++) {
        var myID = document.createElement('article');
        var mySite = document.createElement('h2');
        var myLongitude = document.createElement('p');
        var myLatitude = document.createElement('p');
        var myElevation = document.createElement('p');
        var myGorge = document.createElement('p');
     
        myID.textContent = filteredItemArray[i].ID;
        mySite.textContent = 'Site: ' + filteredItemArray[i].Site;
        myLongitude.textContent = 'Längengrad: ' + filteredItemArray[i].Longitude UTM;
        myLatitude.textContent='Breitengrad: ' + filteredItemArray[i].Latitude UTM +".";
        myElevation.textContent='Breitengrad: ' + filteredItemArray[i].Elevation+".";
        myGorge.textContent='Breitengrad: ' + filteredItemArray[i].Gorge+".";
        myLatitude.textContent='Breitengrad: ' + filteredItemArray[i].Latitude +".";
       
        myID.appendChild(mySite);
        myID.appendChild(myLongitude);
        myID.appendChild(myLatitude);
        myID.appendChild(myElevation);
        myID.appendChild(myGorge);
     
       
        sectionfill.appendChild(myArticle);
       
        console.log('meine Section: ', sectionfill);
    }
}

 

[lasbo]

Kann mir einer sagen wie ich meinen onclick Handler

 <input type = "text" name="Nummer" value="">
<button type="button" onclick="showItems(this.value)">Bestätigen</button>

da Rein bekomme? Also was ich machen müsste, dass die .js Die Zahl als Suchwert übergibt?

Ich finde leider das Problem nicht.

Nicht this.value an "showItems()" übergeben sondern den value-Wert des input-Elements.

 

[binatown]

Nicht this.value an "showItems()" übergeben sondern den value-Wert des input-Elements.

Und wie schreibe ich das? Der value Wert von Input type muss doch leer sein damit man was eintragen kann oder?

Habe aber einen neuen Ansatz. meine Filterfunktion ist soweit fertig, ich schaffe es nur nicht aus einem Dropdown Menu

<section id="auswahl1">
    <p id="frage">Welche ID möchten Sie sich anschauen?</p>
    <select onchange="showItems(this.value)">
        <option value="">bitte auswählen</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
</section>

Ein Input Feld wie oben beschrieben mit der selben Ausgabe zu machen. sprich "showItems(this.value)", welches dann genauso an die Funktion übergeben wird.
Der Gedanke ist dass ich 800 Einträge habe und kein Dropdown Menü mit 800Möglichkeiten machen kann.

Danke

 

[lasbo]

Und wie schreibe ich das? Der value Wert von Input type muss doch leer sein damit man was eintragen kann oder?

Wenn du im Browserfenster etwas in das Input-Feld schreibst, ist kannst Du das mit Javascript auslesen, nämlich aus dem .value-Property.

Um auf das Input-Element zuzugreifen, gibt es verschiedene Wege: document.getElementById(), document.querySelector() und viele mehr.

 

[ger.ruler]

Krasser shit.... das wäre mir ohne FrontEnd-Libary viel zu nervig....

Ich habe nicht alle Posts im Detail gelesen, du bist ja schon ein Stück weit gekommen.... für den Hinterkopf: die aktuellen Browser haben eine File-API. Damit würdest du die Datei in den Browser bekommen.

Um auf das Input-Element zuzugreifen, gibt es verschiedene Wege: document.getElementById(), document.querySelector() und viele mehr.

kann sein, dass ich was übersehe aber das sieht mir eher nach einem event.target.value aus.
@lasbo

getElementById("GIB DEINEM ELEMNT NE ID").addEventListener("DAS EVENT", (e)=>{tuWasMitDemEventObject(e.target.value)})

 

[lasbo]

kann sein, dass ich was übersehe aber das sieht mir eher nach einem event.target.value aus.

Um auf den Wert eines Sibling-Elements zuzugreifen, finde ich den Weg über element.target zu umständlich. Ist aber Geschmackssache.

 

[ger.ruler]

sorry, bearbeitung hat sich überschnitten.... klar holt man sich das element, aber er will ja auch einen listener drauf

Ergänzung (18. März 2021)

Um auf den Wert eines Sibling-Elements zuzugreifen, finde ich den Weg über element.target zu umständlich. Ist aber Geschmackssache.

Was ist deine Alternative ?