Alleen de opgegeven objecten laten zien

Status
Niet open voor verdere reacties.
tim687

tim687

Terugkerende gebruiker
Lid geworden
25 apr 2010
Berichten
1.774
Beste leden,
IK heb hier een html code:
Code: 
<tbody data-bind="foreach: flattened">
            <tr data-bind="attr: { 'id': 'node-' + id(), 'class': parent.id()?'child-of-node-' + parent.id():'' }">
              <td data-bind="html: '<img src=' + ImageURL() + ' />&nbsp; ' + Text()"></td>
              <td data-bind="text: Min"></td>
              <td data-bind="text: Value"></td>
              <td data-bind="text: Max"></td>
            </tr>
          </tbody>

Deze code laat alle objecten uit een json bestand zien, dit gaat met de regel data-bind='foreach: flattened"
Hoe kan ik alleen de opgegeven objecten laten zien wat moet ik aanpassen als het json bestand
piet
jan
kees
hans
bevat en ik wil alleen piet en kees weergeven


Hartelijk bedankt,
Tim
 
Beste Tim,

Dit bericht hoort niet echt in HTML. Het is de volgende keer handig om te vermelden dat je Knockout JS gebruikt.
Ik zou een vraag als deze de volgende keer onder javascript plaatsen.

Ik zou in de viewmodel een apparte observable array maken met de resultaten die je wilt laten zien en deze dan binden in plaats van de observable array 'flattened' of de overbodige resultaten uit deze array filteren als je ze niet elders nodig hebt.
Om je verder te helpen heb ik wat meer informatie nodig over wat je precies wilt bereiken.

Het idee van MVVM (zoals knockout) is om de logica en weergave gescheiden te houden. Logica als "welke data gaat weergegeven worden?" hoort in de viewmodel(javascript) en de uitlijning en positionering in de view (html).
 
Beste Tiran,

Het is niet mijn project dus ik zou niet weten welke componenten de eigenaar erin heeft gedaan aangezien de documentatie ook bagger is :p

Terugkomend op de vraag,

Heb dus bijvoorbeeld dit in mijn json staan:


Code: 
{"id": 0, "Text": "Sensor", "Children": [{"id": 1, "Text": "HOME", "Children": [{"id": 2, "Text": "ASUS P8H77-I", "Children": [{"id": 3, "Text": "ITE IT8771E", "Children": [{"id": 4, "Text": "Voltages", "Children": [{"id": 5, "Text": "Voltage #1", "Children": [], "Min": "0.936 V", "Value": "0.960 V", "Max": "1.224 V", "ImageURL": "images/transparent.png"}, {"id": 6, "Text": "Voltage #2", "Children": [], "Min": "1.488 V", "Value": "1.488 V", "Max": "1.500 V", "ImageURL": "images/transparent.png"}, {"id": 7, "Text": "Voltage #3", "Children": [], "Min": "1.992 V", "Value": "2.016 V", "Max": "2.028 V", "ImageURL": "images/transparent.png"}, {"id": 8, "Text": "Voltage #4", "Children": [], "Min": "2.004 V", "Value": "2.016 V", "Max": "2.040 V", "ImageURL": "images/transparent.png"}, {"id": 9, "Text": "Voltage #5", "Children": [], "Min": "1.992 V", "Value": "2.004 V", "Max": "2.004 V", "ImageURL": "images/transparent.png"}, {"id": 10, "Text": "Voltage #6", "Children": [], "Min": "2.220 V", "Value": "2.220 V", "Max": "2.220 V", "ImageURL": "images/transparent.png"}, {"id": 11, "Text": "Voltage #7", "Children": [], "Min": "0.036 V", "Value": "0.036 V", "Max": "0.036 V", "ImageURL": "images/transparent.png"}, {"id": 12, "Text": "Standby +3.3V", "Children": [], "Min": "0.360 V", "Value": "0.360 V", "Max": "0.360 V", "ImageURL": "images/transparent.png"}, {"id": 13, "Text": "VBat", "Children": [], "Min": "3.312 V", "Value": "3.336 V", "Max": "3.360 V", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/voltage.png"}, {"id": 14, "Text": "Temperatures", "Children": [{"id": 15, "Text": "Temperature #1", "Children": [], "Min": "21.0 °C", "Value": "33.0 °C", "Max": "52.0 °C", "ImageURL": "images/transparent.png"}, {"id": 16, "Text": "Temperature #2", "Children": [], "Min": "21.0 °C", "Value": "31.0 °C", "Max": "47.0 °C", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/temperature.png"}, {"id": 17, "Text": "Fans", "Children": [{"id": 18, "Text": "Fan #1", "Children": [], "Min": "648 RPM", "Value": "1070 RPM", "Max": "1424 RPM", "ImageURL": "images/transparent.png"}, {"id": 19, "Text": "Fan #2", "Children": [], "Min": "853 RPM", "Value": "1160 RPM", "Max": "1671 RPM", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/fan.png"}, {"id": 20, "Text": "Controls", "Children": [{"id": 21, "Text": "Fan Control #1", "Children": [], "Min": "-", "Value": "-", "Max": "-", "ImageURL": "images/transparent.png"}, {"id": 22, "Text": "Fan Control #2", "Children": [], "Min": "-", "Value": "-", "Max": "-", "ImageURL": "images/transparent.png"}, {"id": 23, "Text": "Fan Control #3", "Children": [], "Min": "0.0 %", "Value": "0.0 %", "Max": "0.0 %", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/control.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/chip.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/mainboard.png"}, {"id": 24, "Text": "Intel Core i5-2500K", "Children": [{"id": 25, "Text": "Clocks", "Children": [{"id": 26, "Text": "Bus Speed", "Children": [], "Min": "100 MHz", "Value": "100 MHz", "Max": "100 MHz", "ImageURL": "images/transparent.png"}, {"id": 27, "Text": "CPU Core #1", "Children": [], "Min": "1600 MHz", "Value": "1600 MHz", "Max": "3700 MHz", "ImageURL": "images/transparent.png"}, {"id": 28, "Text": "CPU Core #2", "Children": [], "Min": "1600 MHz", "Value": "3500 MHz", "Max": "3700 MHz", "ImageURL": "images/transparent.png"}, {"id": 29, "Text": "CPU Core #3", "Children": [], "Min": "1600 MHz", "Value": "1600 MHz", "Max": "3700 MHz", "ImageURL": "images/transparent.png"}, {"id": 30, "Text": "CPU Core #4", "Children": [], "Min": "1600 MHz", "Value": "1600 MHz", "Max": "3700 MHz", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/clock.png"}, {"id": 31, "Text": "Temperatures", "Children": [{"id": 32, "Text": "CPU Core #1", "Children": [], "Min": "24.0 °C", "Value": "40.0 °C", "Max": "67.0 °C", "ImageURL": "images/transparent.png"}, {"id": 33, "Text": "CPU Core #2", "Children": [], "Min": "28.0 °C", "Value": "41.0 °C", "Max": "69.0 °C", "ImageURL": "images/transparent.png"}, {"id": 34, "Text": "CPU Core #3", "Children": [], "Min": "22.0 °C", "Value": "38.0 °C", "Max": "67.0 °C", "ImageURL": "images/transparent.png"}, {"id": 35, "Text": "CPU Core #4", "Children": [], "Min": "24.0 °C", "Value": "40.0 °C", "Max": "66.0 °C", "ImageURL": "images/transparent.png"}, {"id": 36, "Text": "CPU Package", "Children": [], "Min": "28.0 °C", "Value": "41.0 °C", "Max": "69.0 °C", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/temperature.png"}, {"id": 37, "Text": "Load", "Children": [{"id": 38, "Text": "CPU Total", "Children": [], "Min": "0.0 %", "Value": "6.5 %", "Max": "62.9 %", "ImageURL": "images/transparent.png"}, {"id": 39, "Text": "CPU Core #1", "Children": [], "Min": "0.0 %", "Value": "3.1 %", "Max": "100.0 %", "ImageURL": "images/transparent.png"}, {"id": 40, "Text": "CPU Core #2", "Children": [], "Min": "0.0 %", "Value": "3.1 %", "Max": "100.0 %", "ImageURL": "images/transparent.png"}, {"id": 41, "Text": "CPU Core #3", "Children": [], "Min": "0.0 %", "Value": "16.9 %", "Max": "100.0 %", "ImageURL": "images/transparent.png"}, {"id": 42, "Text": "CPU Core #4", "Children": [], "Min": "0.0 %", "Value": "3.1 %", "Max": "100.0 %", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/load.png"}, {"id": 43, "Text": "Powers", "Children": [{"id": 44, "Text": "CPU Package", "Children": [], "Min": "0.0 W", "Value": "12.5 W", "Max": "22332.5 W", "ImageURL": "images/transparent.png"}, {"id": 45, "Text": "CPU Cores", "Children": [], "Min": "0.0 W", "Value": "8.1 W", "Max": "22986.7 W", "ImageURL": "images/transparent.png"}, {"id": 46, "Text": "CPU Graphics", "Children": [], "Min": "0.0 W", "Value": "0.3 W", "Max": "23294.3 W", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/power.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/cpu.png"}, {"id": 47, "Text": "Generic Memory", "Children": [{"id": 48, "Text": "Load", "Children": [{"id": 49, "Text": "Memory", "Children": [], "Min": "13.1 %", "Value": "14.5 %", "Max": "25.3 %", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/load.png"}, {"id": 50, "Text": "Data", "Children": [{"id": 51, "Text": "Used Memory", "Children": [], "Min": "1.0 GB", "Value": "1.1 GB", "Max": "1.9 GB", "ImageURL": "images/transparent.png"}, {"id": 52, "Text": "Available Memory", "Children": [], "Min": "5.7 GB", "Value": "6.6 GB", "Max": "6.7 GB", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/power.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/ram.png"}, {"id": 53, "Text": "SAMSUNG HD204UI", "Children": [{"id": 54, "Text": "Temperatures", "Children": [{"id": 55, "Text": "Temperature", "Children": [], "Min": "15.0 °C", "Value": "34.0 °C", "Max": "42.0 °C", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/temperature.png"}, {"id": 56, "Text": "Load", "Children": [{"id": 57, "Text": "Used Space", "Children": [], "Min": "69.6 %", "Value": "89.8 %", "Max": "89.8 %", "ImageURL": "images/transparent.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/load.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/hdd.png"}], "Min": "", "Value": "", "Max": "", "ImageURL": "images_icon/computer.png"}], "Min": "Min", "Value": "Value", "Max": "Max", "ImageURL": ""}

Dit komt neer op (ingeklapt):



Hoe moet ik dit filteren zodat bijvoorbeeld de volledige harddrive verdwijnt van de lijst?

Ik ga de code van het programma die het json bestand maakt niet veranderen.

Bedankt,
Tim
 
Hmm dat is lastig zo te zeggen.
Als het een open source project is dan kun je me de code sturen die je nu hebt en kan ik kijken of ik een voorbeeld voor je kan maken met documentatie.
Het project genaamd Open Hardware Monitor dat ik kon vinden is in ieder geval open source, maar dat is in C# geschreven voorzover ik kon zien.
 
Dat klopt, alleen het programma heeft een webserver die dit gebruikt.
EDIT: Ik heb zelf al heel wat wijzigingen aan de code gemaakt
 
Ok. Ik kan die webserver momenteel niet zelf draaien. (Ik heb geen windows machine tot mijn beschikking) Maar ik kan op basis van de JSON die je hier boven hebt gepost en de code misschien alsnog een voorbeeld schrijven.
Gezien het open karakter van het project en de verplichtingen van de opensource licentie lijkt het me geen probleem om de code hier te plaatsen toch?
 
Dat is inderdaad geen probleem, ik heb alleen die specifieke code nog niet gewijzigd.
Wel de "omliggende" code.
Kan ik niet een soort checkbox maken voor de regel van een "parent" zoals het moederboord, die als je hem "checkt" die "parent" niet laat zien?

De bestanden van de website:

Open Hardware Monitor website bestanden.7Z

EDIT: Ik ga zo bbq'en dus het is mogelijk dat ik even niet meer reageer
 
geen probleem. Ik heb net zo goed een leven naast helpmij hoor :p
Ik ga er denk ik pas morgen mee aan de slag.
Veel plezier met de BBQ :)
 
Bedankt!
De BBQ was reuze gezellig, nu even m'n bedje opzoeken.

Als je nog meer info over het programma nodig hebt, je weet me te bereiken
 
Hmm ik heb een voorbeeld geprobeerd te maken, maar ik liep er tegen aan dat de libraries die hier gebruikt worden ernstig verouderd zijn.
De tree table is een oudere versie en ik weet niet welke omdat het versie nummer er niet in staat. Jquery is 1.7.1 waar we bij 1.11.1 zitten.
Er is blijkbaar veel veranderd aan tree table want de documentatie heeft het over hele andere classes en functies die wel nodig zijn voor dit doel.
Wat ik wou doen is een node uit de tabel gooien met al zn child nodes, dit zit ingebouwd in tree table. Je zou ook de JSON zelf kunnen filteren en anders terug geven.
Het is denk ik handig om eerst de huidige versie werkend te krijgen met de laatste versies van alle libraries die gebruikt worden en dan pas verder te ontwikkelen.
verder is het een goed idee om uit te denken hoe je die filtering wilt toepassen.
Wil je een soort delete knop op elke rij hebben die de rij en eventuele daar onder horende children weg halen uit de tabel of wil je een zoekveld maken oid?
 
Een delete knop lijkt me een slimmer idee.
Als ik de nieuwste versies gebruik, moet ik dan dingen van de code herschrijven?
Ik zal trouwens ook gaan nadenken over hoe ik moet filteren

Bedankt,
Tim
 
Ja de klassen die aan de tabel rijen worden meegegeven om aan te geven wat parent en wat child nodes zijn, zijn veranderd en het aanroepen van de datatables wordt nu in kleine letters geschreven in plaats van met camelCasing.
Verder raad ik je aan je wat verder te verdiepen in knockout, dit is namelijk de library die gebruikt wordt voor de data-binding. Het is een hele handige library maar heeft wel een aantal eigenaardigheden. Documentatie en tutorials daar voor zijn te vinden op http://knockoutjs.com/

Wellicht is het beter om de code opnieuw te schrijven met behulp van knockout. Er zijn voorbeelden te vinden waarbij het niet nodig is om gebruik te maken van een tabel en jquery plugin.
http://jsfiddle.net/pabloski/K9S36/ is zo'n voorbeeld. Ik zou je hier wel bij kunnen helpen. Het is denk ik wel handiger om dan email adressen uit te wisselen, anders spammen we helpmij.nl vol :p
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan