[FRAGE] Liste aus Array heraus erstellen (JS) und in HTML darstellen

[Jakob03]

Hallo Experten,

ich bin relativ neu in JS und HTML unterwegs und stehe gerade vor einem für mich unlösbaren Problem. Ich versuche es so gut wie möglich zu beschreiben.

Zu einem Projekt mit einer bestimmten Projektnummer und Projektnamen gibt es verschiedene Operationen, jeweils auch mit Nr. und Namen.

Ich habe aus dem Backend einen Datensatz mit allen Operationen. Dort sind 450 Operationen vermerkt,
ich habe also 450 Einträge im Array. Das habe ich hier vereinfacht dargestellt mit 11 Operationen, wobei
die ersten 6 zu Projekt 01 ABC gehören, die nächsten 3 Operationen zu Projekt 01 DEF und die letzten 3 zu Projekt GHI:

{results: Array ()}
results: Array ()
0: projektnr: 01, name: ABC, operation: xy, opnr: 011
1: projektnr: 01, name: ABC, operation: as, opnr: 012
2: projektnr: 01, name: ABC, operation: df, opnr: 013
3: projektnr: 01, name: ABC, operation: gh, opnr: 014
4: projektnr: 01, name: ABC, operation: hj, opnr: 015
5: projektnr: 01, name: ABC, operation: yx, opnr: 016
6: projektnr: 02, name: DEF, operation: rt, opnr: 021
7: projektnr: 02, name: DEF, operation: uz, opnr: 022
8: projektnr: 02, name: DEF, operation: iu, opnr: 023
9: projektnr: 03, name: GHI, operation: de, opnr: 031
10: projektnr: 03, name: GHI, operation: xo, opnr: 032
11: projektnr: 03, name: GHI, operation: ok, opnr: 033


Ich muss nun eine Liste erstellen in der nur die Projekte erscheinen und diese in HTML darstellen

Projektnummer 01
Name ABC

Projektnummer 02
Name DEF

Projektnummer 03
Name GHI

Mit Klick auf das jeweilige Projekt muss ich dann eine Liste für die einzelnen Operationen zu diesem Projekt erstellen.
Zum Beispiel, ich klicke auf Projekt 01, dann möchte ich sehen:

Projektnummer 01
Name ABC

Operation xy Operationnummer 011
Operation as Operationnummer 012
...usw.




Ich habe überhaupt keine Idee, wie ich anfangen oder vorgehen muss. Ich muss als erstes wohl die gesamte Liste mit READ laden und dann in einer weiteren Methode einen Array erstellen in den
immer nur einmal die Projektnummer geschrieben wird, die ich aus dieser Gesamtliste raus lese.
Dann brauche ich wohl noch eine Methode, die mir dann diesen Array zurückgibt. Zudem brauche ich noch einen Array, der mir zu jedem Projekt die zugehörigen Operationen gibt.
Mehr als das weiß ich nicht.

Ich hoffe, das ist einigermaßen verständlich. Falls Infos fehlen, kann ich sie gerne noch liefern, ich muss nur wissen, was

Danke schon mal vorab
Jakob

 

[mikdoe]

Das im Browser zu machen erscheint mir uneffektiv. Warum soll das mit JS gemacht werden?

 

[Jakob03]

Das kann ich leider auch nicht so ganz sagen. Vom Backend her kann es nicht gemacht werden, so die Aussage. Ist keine Aufgabe, die ich mir ausgedacht habe, sondern so vorgegeben. Ich habe auch keine Wahl, was die Sprache angeht.

 

[mikdoe]

Dann würde ich das mittels Hashobjekt machen. Als Key den Projektnamen und am Ende bleiben alle Projektnamen genau 1 x übrig.

 

[Jakob03]

Ich weiß zwar nicht genau, was das ist, aber wie würde ich das denn coden?

 

[mikdoe]

Über das Array iterieren und den Projektnamen als Schlüssel zuweisen. Um konkreter zu werden müsste man den genauen Aufbau kennen.

Schaue dir doch am besten mal das hier an: https://codeburst.io/javascript-array-distinct-5edc93501dc4
Das sieht für mich nach einer passenden und effektiven Lösung ganz ohne Iteriererei (meine Krankheit) aus.
ES5 und ES6 sind nur die Javascript Versionen, siehe https://en.wikipedia.org/wiki/ECMAScript
Und die Bilder zeigen die Chrome Browserconsole F12.

 

[kkapsner]

const projects = {};
[
	{projektnr: "01", name: "ABC", operation: "xy", opnr: "011"},
	{projektnr: "01", name: "ABC", operation: "as", opnr: "012"},
	{projektnr: "01", name: "ABC", operation: "df", opnr: "013"},
	{projektnr: "01", name: "ABC", operation: "gh", opnr: "014"},
	{projektnr: "01", name: "ABC", operation: "hj", opnr: "015"},
	{projektnr: "01", name: "ABC", operation: "yx", opnr: "016"},
	{projektnr: "02", name: "DEF", operation: "rt", opnr: "021"},
	{projektnr: "02", name: "DEF", operation: "uz", opnr: "022"},
	{projektnr: "02", name: "DEF", operation: "iu", opnr: "023"},
	{projektnr: "03", name: "GHI", operation: "de", opnr: "031"},
	{projektnr: "03", name: "GHI", operation: "xo", opnr: "032"},
	{projektnr: "03", name: "GHI", operation: "ok", opnr: "033"},
].forEach(function(operation){
	let project = projects[operation.projektnr];
	if (!project){
		project = {
			number: operation.projektnr,
			name: operation.name,
			operations: [],
		};
		projects[operation.projektnr] = project;
	}
	project.operations.push({
		number: operation.opnr,
		operations: operation.operation,
	});
	
});

console.log(projects);