JavaScript Daten aus HTML p Element in Array laden

[Cool Master]

Moin,

ich habe nun schon seit ein paar Tagen damit zu kämpfen weil ich einfach nicht drauf komme wie ich das anstellen kann bzw. ob es überhaupt möglich ist. Und zwar habe ich 4 Div Container in dem Kennzahlen sind die in ein Array sollen. Hier mal der HTML Code:

<div id="body">
    <div id="content">
        <div id="Personalstruktur">
            <p id="jahres_date_perso">31. Januar 2013 28. Februar 2013 31. März 2013</p>
            <p id="jahres_stellen">5 1 2</p>
            <p id="jahres_personalplanung">5 4 1</p>
            <p id="jahres_rekrutierungsprozesse">4 2 3</p>
            <p id="jahres_kommunikation">2 1 4</p>
            <p id="jahres_fuehrungskultur">2 2 5</p>
            <p id="jahres_beteiligungskultur">4 3 1</p>
            <p id="jahres_nachaltigkeit">3 2 5</p>
            <p id="jahres_arbeitsbedingung">2 3 1</p>
            <p id="jahres_verguetungsstruktur">1 2 5</p> 
        </div>
        <div id="Chancengleichheit">
            <p id="jahres_date_chance">31. Januar 2013 28. Februar 2013 31. März 2013</p>
            <p id="jahres_arbeitsgestaltung">1 4 3</p>
            <p id="jahres_kinderbetreuung">5 4 2</p>
            <p id="jahres_sozial">3 5 2</p>
            <p id="jahres_kommunikationsbeziehung">4 3 4</p>
            <p id="jahres_notlagenfin">3 4 5</p>
            <p id="jahres_notlagenper">2 3 4</p>
            <p id="jahres_arbeitsorganisation">3 5 3</p>
            <p id="jahres_arbeitnehmergruppenalt">2 4 5</p>
            <p id="jahres_arbeitnehmergruppenjung">3 5 4</p>
            <p id="jahres_frauenfoerderung">2 3 4</p>
            <p id="jahres_migrationfoerderung">4 5 2</p>
            <p id="jahres_benachteiligtfoerderung">5 3 2</p>
        </div>
        <div id="Gesundheit">
            <p id="jahres_date_gesu">31. Januar 2013 28. Februar 2013 31. März 2013</p>
            <p id="jahres_gefahrbeurteilung">4 4 1</p>
            <p id="jahres_gesamtkonzept">5 4 1</p>
            <p id="jahres_eingliederung">3 2 5</p>
            <p id="jahres_gesundheitsdialoge">4 3 2</p>
            <p id="jahres_gesphys">2 3 5</p>
            <p id="jahres_gespsych">1 3 2</p>
            <p id="jahres_wiederstandskraft">4 5 2</p>
            <p id="jahres_transundkomm">4 5 3</p>
            <p id="jahres_leistungsgeminderten">2 3 4</p>
        </div>
        <div id="Kompetenz">
            <p id="jahres_date_komp">31. Januar 2013 28. Februar 2013 31. März 2013</p>
            <p id="jahres_kompetenzanforderungen">4 3 2</p>
            <p id="jahres_lebenslanglernen">3 5 2</p>
            <p id="jahres_bildungsmasnahmen">5 4 3</p>
            <p id="jahres_wissenmanagement">4 5 3</p>
            <p id="jahres_wissenstranfsfer">3 4 5</p>
            <p id="jahres_betrieblichenwissen">2 3 4</p>
            <p id="jahres_kritischefunktion">5 2 3</p>
            <p id="jahres_potentialprognosefuehrung">2 4 5</p>
            <p id="jahres_potentialprognosespezi">4 5 3</p>
        </div>
    </div>
</div>

Ich habe nun 4 Arrays:

<script type="text/javascript">

var Personalstruktur = new Array();

var Chancengleichheit = new Array();

var Gesundheit = new Array();

var Kompetenz = new Array();

</script>

In den Array Personalstruktur, möchte ich nun alles unter dem <div id="Personalstruktur"> einbauen. Evtl. könnt ihr es erkennen aber die Stellen sind so aufgebaut wie beim Datum sprich alles was an 1. Stelle kommt gehört zu dem 31. Januar 2013, alles was an der 2. Stelle kommt gehört zum 28. Februar 2013 usw.

Ist es nun möglich das ich die Daten in ein Array aufnehmen kann anhand der Position innerhalb des <p> Elements? Oder muss ich es über ein anderen Weg versuchen? Brauch ich evtl. ein Framework ala JQuery?

 

[Yuuri]

jQuery, prototype, MooTools, kein Framework?

 

[Cool Master]

Aktuell nutze ich noch kein Framework, deswegen auch die Frage ob ich evtl. eins bräuchte.

 

[DasBoeseLebt]

Geht natürlich auch ohne.
Du kannst dir von den div's die Kinder holen ( .children ) und dann dich da durcharbeiten.
.tagName zur Überprüfung um was es sich beim Element handelt, scheinst du aber nicht zu brauchen.

Den Inhalt des Elements p musst du dann selbst auslesen und dir das so hindrehen das es passt.
(Bis aufs Datum kannst du ja den Inhalt einfach splitten am Leerzeichen)


Mit JQuery ist zu mindestens das Durchgehen der Children einfacher.

$('Element').children('p').each(function(){/*code*/})

 

[Madman1209]

Hi,

sehe da jetzt eigentlich auch nicht direkt ein Problem. Auslesen, aufsplitten, Schleifchen drum rum und es hat sich.

VG,
Mad

 

[Cool Master]

Ok könntet ihr bzw. du DasBoeseLebt mal ein kurzes Beispiel anhand den Daten machen? Ich blick da gerae voll nicht durch und steh auf der Leitung :O

 

[Madman1209]

Hi,

falls du im Firefox testest installiere dir einfach FireBug, öffne die Console, hole dir per "getElementById" einfach ein "div", speichere es in einer Variable und lasse sie dir mit "console.log([VARIABLENNAME])" ausgeben. Dann kannst du dir das Objekt anschauen und dich daran immer tiefer "runterhangeln", bis du beim Inhalt bist. Den kannst du mit "split" an den Leerstellen auftrennen.

VG,
Mad

 

[DasBoeseLebt]

Ok könntet ihr bzw. du DasBoeseLebt mal ein kurzes Beispiel anhand den Daten machen? Ich blick da gerae voll nicht durch und steh auf der Leitung :O

<!doctype html>
<html lang="de">

<head>

<script>
	var Personalstruktur = new Array();
	var Chancengleichheit = new Array();
	var Gesundheit = new Array();
	var Kompetenz = new Array();
	
	function fillArrays(){
		var personalDiv = document.getElementById("Personalstruktur");
		var children = personalDiv.children;
		
		for(var digit = 0; digit < 3 ; digit++){
			for(var ind = 0; ind < children.length; ind++){
				var temp = children[ind].innerText;
				/* hier splittest du das halt noch auf und schreibst dir das ins Array */
				/* Digit gibt an, wie oft du schon durch bist, damit du weißt welche Stelle du haben willst */
			}
		}
	}
	
</script>

</head>
<body onload="fillArrays()">
	<div id="body">
		<div id="content">
			<div id="Personalstruktur">

<!-- etc. -->

So ungefähr dachte ich - so wolltest du es doch ungefähr haben?

Edit:
Natürlich ist das hier nur ein Schaubild und du solltest den Code so schreiben, dass er sich für jedes Div anwenden lässt (d.h. doppelten Code vermeiden). Also schön Auslagern usw. aber die Idee sollte klar sein.

 

[Madman1209]

Hi,

wenn ich mir deine "temp" Variable ausgeben lasse ist es allerdings bei mir immer "undefined", da ist was noch nicht korrekt. "temp" sollte wahrscheinlich "children[ind]" sein oder? Also

var temp = children[ind].innerHTML;


VG,
Mad

 

[DasBoeseLebt]

Hi,

wenn ich mir deine "temp" Variable ausgeben lasse ist es allerdings bei mir immer "undefined", da ist was noch nicht korrekt. "temp" sollte wahrscheinlich "children[ind]" sein oder? Also

var temp = children[ind].innerHTML;


VG,
Mad

Ja, .. natürlich. Ups ^^, danke.

 

[Yuuri]

var Personalstruktur = [];
var root = document.getElementById( 'Personalstruktur' );

for( var chi = 0, che = root.children.length; chi < che; ++chi )
{
    var child = root.children[chi];
    if( child.nodeName && child.nodeName == 'P' )
    {
        var val = child.textContent,
            datematches = val.match( /\d+\. [\wäöüß]+ \d{4}/gi );
        
        if( datematches )
            Personalstruktur.push( datematches );
        else
            Personalstruktur.push( val.split( ' ' ) );
    }
}

Natürlich unvollständig. Die Daten müsstest du evtl. auch anders aufbereiten.

 

[Madman1209]

Hi,

@DasBoeseLebt

würde vor allem auch die zweite Schleife wegrationalisieren und eher etwas schreiben wie:

for(var ind = 1; ind < children.length; ind++){
    var temp = children[ind].innerHTML;
	var arrayPersonal = temp.split(' ');
	console.log(arrayPersonal);
    }

Das gibt einem wunderbar z.B. ein Array mit den einzelnen Werten ["5","1","2"] aus. Ich denke, damit kann man doch weiter arbeiten.

VG,
Mad

 

[Cool Master]

Danke schon mal dafür, aber ich bekomme trotz:

var temp = children[ind].innerHTML;

immer noch:

ReferenceError: temp is not defined

document.write(temp);

 

[DasBoeseLebt]

Klar geht das, musste halt nur zwischenspeichern (oder wie auch immer er die Daten im Array haben will - ich dachte erst Spalte 1, danach Spalte 2 usw. ) und Yuuri zeigt dir gleich auch wie es mit dem Datum prima geht.

 

[Cool Master]

Ok, noch mal, danke. Ich schau mir das ganze noch mal genauer am Wochenende an

 

[palace4d]

Oder so:

var personID = document.querySelectorAll("#Personalstruktur p");
var personArr = [];

[].forEach.call(personID, function (val) {
    personArr.push(val.firstChild);
});


console.log(personArr);

Dann noch split und neues Array.

 

[Madman1209]

Hi,


aaaaah Yoda gibt Yoda Tipps! Bin gespannt wann Luke und Obi-Wan aufschlagen

Sorry, musste sein

@Cool Master

Hast du es denn mittlerweile ausprobiert und hinbekommen?

VG,
Mad

 

[Cool Master]

Ausprobiert ja, aber noch nicht ausgiebig getestet da ich aktuell keine Zeit habe, da ich auf Wohnungssuche bin Alleine heute noch 4 Termine

Ich muss eh mal abschätzen ob ich es Zeitlich hin bekomme für das Projekt. Das ganze soll in mein Abschlussprojekt (Fachinformatiker Anwendungsentwicklung) rein kommen aber ich glaube ich lass es weg, da es Zeitlich einfach knapp wird bis zum 19. damit fertig zu werden. Evtl. kann ich auch was an der Daten Ausgabe machen das er direkt als Array ausgibt, aber dafür muss ich mal im Django IRC vorbei schauen.

Trotzdem noch mals danke für die Nachfrage