Forum: PC-Programmierung Brauche Hilfe in javascript programmierung


You were forwarded to this site from EmbDev.net. Back to EmbDev.net
von Martin L. (tempusertempuser)


Angehängte Dateien:

Lesenswert?

Hallo,

ich habe ein Digitales Messgeraet welches folgendes Json ausgibt
1
{"1":[{"a":"19:10","b":"20:30","c":"1"},{"a":"12:30","b":"13:40","c":3}],"2":[{"a":"14:10","b":"15:30","c":"2"},{"a":"9:30","b":"10:00","c":"3"}],"3":[{"a":"8:10","b":"8:20","c":"4"},{"a":"7:10","b":"7:20","c":"3"}],"4":[{"a":"8:10","b":"8:20","c":"5"},{"a":"6:20","b":"6:30","c":"f"}]}

Ist es moeglich mit javascript folgende Tabelle daraus einfach zu 
generieren?
1
<style type="text/css">
2
.tg  {border-collapse:collapse;border-spacing:0;}
3
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
4
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
5
</style>
6
<table class="tg">
7
  <tr>
8
    <th class="tg-031e">a</th>
9
    <th class="tg-031e">b</th>
10
    <th class="tg-031e">c</th>
11
    <th class="tg-031e">d</th>
12
    <th class="tg-031e"></th>
13
  </tr>
14
  <tr>
15
    <td class="tg-031e" rowspan="2">1</td>
16
    <td class="tg-031e">19:10</td>
17
    <td class="tg-031e">20:30</td>
18
    <td class="tg-031e">1</td>
19
    <td class="tg-031e"></td>
20
  </tr>
21
  <tr>
22
    <td class="tg-031e">12:30</td>
23
    <td class="tg-031e">13:40</td>
24
    <td class="tg-031e">3</td>
25
    <td class="tg-031e"></td>
26
  </tr>
27
  <tr>
28
    <td class="tg-031e" rowspan="2">2</td>
29
    <td class="tg-031e">14:10</td>
30
    <td class="tg-031e">15:30</td>
31
    <td class="tg-031e">2</td>
32
    <td class="tg-031e"></td>
33
  </tr>
34
  <tr>
35
    <td class="tg-031e">9:30</td>
36
    <td class="tg-031e">10:00</td>
37
    <td class="tg-031e">3</td>
38
    <td class="tg-031e"></td>
39
  </tr>
40
  <tr>
41
    <td class="tg-031e" rowspan="2">3</td>
42
    <td class="tg-031e">8:10</td>
43
    <td class="tg-031e">8:20</td>
44
    <td class="tg-031e">4</td>
45
    <td class="tg-031e"></td>
46
  </tr>
47
  <tr>
48
    <td class="tg-031e">7:10</td>
49
    <td class="tg-031e">7:20</td>
50
    <td class="tg-031e">3</td>
51
    <td class="tg-031e"></td>
52
  </tr>
53
  <tr>
54
    <td class="tg-031e" rowspan="2">4</td>
55
    <td class="tg-031e">8:10</td>
56
    <td class="tg-031e">8:20</td>
57
    <td class="tg-031e">5</td>
58
    <td class="tg-031e"></td>
59
  </tr>
60
  <tr>
61
    <td class="tg-031e">6:20</td>
62
    <td class="tg-031e">6:30</td>
63
    <td class="tg-031e"></td>
64
    <td class="tg-031e"></td>
65
  </tr>
66
</table>

Danke fuer eure Hilfe ich stehe auf dem Schlauch

von Christoph K. (backdraft007)


Lesenswert?

Moin,
sehe bisher kein Javascript.

https://www.w3schools.com/js/js_json.asp
https://www.w3schools.com/jsref/jsref_foreach.asp

Mal so als erste Lektüre.

von Martin L. (tempusertempuser)


Lesenswert?

hier ist mein Versuch
1
let text = '{"1":[{"a":"19:10","b":"20:30","c":"1"},{"a":"12:30","b":"13:40","c":3}],"2":[{"a":"14:10","b":"15:30","c":"2"},{"a":"9:30","b":"10:00","c":"3"}],"3":[{"a":"8:10","b":"8:20","c":"4"},{"a":"7:10","b":"7:20","c":"3"}],"4":[{"a":"8:10","b":"8:20","c":"5"},{"a":"6:20","b":"6:30","c":"f"}]}';
2
3
const obj = JSON.parse(text);
4
5
alert(obj.1[0].a);
Zeigt nichts an

von Christoph K. (backdraft007)


Lesenswert?

Martin L. schrieb:
> alert(obj.1[0].a);

Das funktioniert auch nicht.
1
console.log(obj);
Und dann benutzt Du die Entwickertools Deines Browsers und weiter geht 
es.
https://www.w3schools.com/js/js_arrays.asp

von Rolf (rolf22)


Lesenswert?

Martin L. schrieb:

> Ist es moeglich mit javascript folgende Tabelle daraus einfach zu
> generieren?

Ja, aber nicht "einfach".

> const obj = JSON.parse(text);

Das geht jedenfalls gar nicht. Rechts vom Gleichheitszeichen muss eine 
Konstante stehen. Ein Funktionsaufruf ist aber keine Konstante.

Ist da keine Fehlermeldung gekommen? Und warum willst du überhaupt, dass 
das Objekt eine Konstante ist?

von Εrnst B. (ernst)


Lesenswert?

Rolf schrieb:
> Das geht jedenfalls gar nicht. Rechts vom Gleichheitszeichen muss eine
> Konstante stehen. Ein Funktionsaufruf ist aber keine Konstante.

Natürlich geht das. die const-variable wird mit dem 
Funktions-Rückgabewert initialisiert, und ist danach unveränderlich.

übrigens nur "obj" selber. Nicht die Objekte, auf die das zeigt.
1
const obj=JSON.parse(text);
2
obj["1"][0]["a"]=42;
ist erlaubt.
1
obj=42;
nicht.

: Bearbeitet durch User
von Daniel A. (daniel-a)


Lesenswert?

Martin L. schrieb:
> alert(obj.1[0].a);
> Zeigt nichts an

Identifier können nicht mit 1 beginnen, deshalb ist obj.1 ungültig. Der 
[] Operator kann sowohl bei Objekten als auch bei Arrays angewendet 
werden, wenn ein Objekt Key kein gültiger Identifier ist, kann man damit 
trotzdem darauf zugreifen. Hier also `obj[1][0].a` oder 
`obj["1"]["0"].a` (kommt aufs selbe raus).

von Daniel A. (daniel-a)


Lesenswert?

Martin L. schrieb:
> Ist es moeglich mit javascript folgende Tabelle daraus einfach zu
> generieren?

Da gibt es viele varianten. Per DOM (document.createElement(), 
element.appendChild(node), element.classList.add("class"), etc.), per 
Frameworks, etc.
Bei ganz kleineren Projekten nutze ich oft kleine Template 
Hilfsfunktionen: https://jsfiddle.net/Lrjh7kyz/2/

von Martin L. (tempusertempuser)


Lesenswert?

Daniel A. schrieb:
> Martin L. schrieb:
>> Ist es moeglich mit javascript folgende Tabelle daraus einfach zu
>> generieren?
>
> Da gibt es viele varianten. Per DOM (document.createElement(),
> element.appendChild(node), element.classList.add("class"), etc.), per
> Frameworks, etc.
> Bei ganz kleineren Projekten nutze ich oft kleine Template
> Hilfsfunktionen: https://jsfiddle.net/Lrjh7kyz/2/

Danke fuer dein Code der sieht echt gut aus...


Ist es eigentlich auch moeglich aus der Tabelle dann wieder ein json zu 
erstellen automatisch?

: Bearbeitet durch User
von Heinz B. (Firma: Privat) (hbrill)


Angehängte Dateien:

Lesenswert?

Also, beim einfachen Parsen (textfriendly) bekomme ich da
4 Objekte  -> 1 - 4. Und jedes Objekt enthält wiederum eine
Liste mit 2 Objekten, in denen dann a,b,c wieder in einem einzelnen
Objekt definiert sind.

Mit einer Sprache (die auch JSON-Funktionen bereitstellt) deiner Wahl
dürfte es doch einfach sein, die Uhrzeiten durch Iterieren heraus zu
filtern. Ich gehe mal jetzt von deinem angeängten Bild aus.
Das ganze in ein Gitter zu schreiben, ist ja auch kein Problem.

Da könnte man sogar auch ändern und erneut speichern.

Deute ich das so richtig ?

von Heinz B. (Firma: Privat) (hbrill)


Lesenswert?

Vielleicht hilft dir schon sowas weiter :
https://www.w3schools.com/js/js_json_html.asp

Außerdem gibt es noch verschiedene Online JSON TO HTML - Konverter.

: Bearbeitet durch User
von Hans (ths23)


Lesenswert?

Martin L. schrieb:
> const obj = JSON.parse(text);
> 45alert(obj.1[0].a);
> Zeigt nichts an

So funktioniert das auch nicht. Du mußt die JSON-Daten erst mal 
einlesen, bevor Du parsen kannst - eigentlich logisch oder?

Das geht z.B. mit jQuery und der Funktion getJSON(url[, data][, 
success]). Bei url gibt man die Datenquelle an. Bei mir ist das ein 
PHP-Script welches auf dem Server läuft und die Daten an die Webseite 
sendet. success ist die Funktion die ausgeführt wird, wenn der 
Datenempfang erfolgreich war. In dieser Funktion werden die Daten dann 
auch zur Anzeige gebracht.
Bei mir sieht das in etwa so aus (Auszug aus meiner Webseite):
1
function readData(){
2
   $.getJSON(<URL>, setData); 
3
};
4
5
function setData(data){
6
  var jsonArray = jQuery.parseJSON(data);
7
      .
8
      .
9
      .
10
      do something with jsonArray
11
}

von Daniel A. (daniel-a)


Lesenswert?

Heinz B. schrieb:
> Vielleicht hilft dir schon sowas weiter :
> https://www.w3schools.com/js/js_json_html.asp

Gute Beispiele, was man nicht machen sollte. XSS, und das total 
veraltete XMLHttpRequest...

Hans schrieb:
> Das geht z.B. mit jQuery und der Funktion getJSON

jQuery ist heute auch nicht mehr empfehlenswert. Für Requests nimmt man 
heute das native fetch(): 
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

von Martin L. (tempusertempuser)


Lesenswert?

Hier ist meine Version
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
.tg  {
6
  border-collapse: collapse;
7
  border-spacing: 0;
8
}
9
10
.tg td {
11
  font-family: Arial, sans-serif;
12
  font-size: 14px;
13
  padding: 10px 5px;
14
  border-style: solid;
15
  border-width: 1px;
16
  overflow: hidden;
17
  word-break: normal;
18
}
19
20
.tg th {
21
  font-family: Arial, sans-serif;
22
  font-size: 14px;
23
  font-weight: normal;
24
  padding: 10px 5px;
25
  border-style: solid;
26
  border-width: 1px;
27
  overflow: hidden;
28
  word-break: normal;
29
}
30
31
</style>
32
<script>
33
function myFunction() {
34
const answer = [...document.querySelectorAll(".tg>tbody>tr:has(td)")].reduce((acc, row, index, rows) => {
35
  const offset = +(row.cells.length > 4);
36
  const [a, b, c] = [...row.cells].slice(offset).map(({textContent}) => textContent);
37
  const n = rows[index - 1 + offset].cells[0].textContent;
38
  acc[n] = acc[n] || [];
39
  acc[n].push({a, b, c});
40
  return acc
41
}, {})
42
console.log(answer)
43
}
44
</script>
45
</html>
46
<body>
47
<button onclick="myFunction()">Click me</button>
48
49
<script>
50
51
// Nützliche Templating Funktionen
52
function html2fragment(html){
53
  const template = document.createElement("template");
54
  template.innerHTML = html;
55
  return template.content;
56
}
57
58
function TemplateInstance(root){
59
  const result = {};
60
  for(const element of Array.from(root.querySelectorAll('[\\@]'))){
61
    const name = element.getAttribute('@');
62
    element.removeAttribute('@');
63
    result[name] = element;
64
    element.classList.add('at-'+name);
65
  }
66
  result.fragment = root;
67
  return result;
68
}
69
70
function Template(html){
71
  const fragment = html2fragment(html);
72
  return (d=document)=>TemplateInstance(d.importNode(fragment, true));
73
}
74
75
// Tabelle aufbauen
76
const T_Table = Template(`
77
  <table class="tg" @="table">
78
    <thead>
79
      <th>a</th>
80
      <th>b</th>
81
      <th>c</th>
82
      <th>d</th>
83
    </thead>
84
  </table>
85
`);
86
87
const T_Row = Template(`
88
  <tr @="tr">
89
    <td class="tg-031e" @="a"></td>
90
    <td class="tg-031e" @="b"></td>
91
    <td class="tg-031e" @="c"></td>
92
  </tr>
93
`);
94
95
const T_GroupCells = Template(`<td @="id" class="tg-031e" rowspan="999999"></td>`);
96
97
98
function dataToTable(data){
99
  const e_table = T_Table();
100
  for(const [id,group] of Object.entries(data)){
101
    const tbody = document.createElement("tbody");
102
    let firstRow = null;
103
    for(const row of group){
104
      const e_row = T_Row();
105
      firstRow ??= e_row;
106
      e_row.a.textContent = row.a;
107
      e_row.b.textContent = row.b;
108
      e_row.c.textContent = row.c;
109
      tbody.appendChild(e_row.fragment);
110
    }
111
    const e_cells = T_GroupCells();
112
    e_cells.id.textContent = id;
113
    // Note, we could get all td in e_cells.fragment and set rowspan to the correct number, it's easier to just put the rows in a tbody and set rowspan to a high number to fill all the rows in the tbody
114
    firstRow.tr.prepend(e_cells.fragment);
115
    e_table.table.appendChild(tbody);
116
  }
117
  return e_table.fragment;
118
}
119
120
const text = '{"1":[{"a":"19:10","b":"20:30","c":"1"},{"a":"19:10","b":"20:30","c":"1"},{"a":"12:30","b":"13:40","c":3}],"2":[{"a":"14:10","b":"15:30","c":"2"},{"a":"9:30","b":"10:00","c":"3"}],"3":[{"a":"8:10","b":"8:20","c":"4"},{"a":"8:10","b":"8:20","c":"4"},{"a":"7:10","b":"7:20","c":"3"}],"4":[{"a":"8:10","b":"8:20","c":"5"},{"a":"6:20","b":"6:30","c":"f"}]}';
121
const data = JSON.parse(text);
122
123
const e_table = dataToTable(data);
124
125
document.body.appendChild(e_table);
126
127
128
</script>
129
</body>
130
</html>

allerdings erhalte ich einen Fehler
1
TypeError: Cannot read properties of undefined (reading 'cells') at 'myFunction'


Was mache ich da falsch?

von Εrnst B. (ernst)


Lesenswert?

Martin L. schrieb:
> TypeError: Cannot read properties of undefined (reading 'cells') at
> 'myFunction'
>
> Was mache ich da falsch?

Hier:
Martin L. schrieb:
> rows[index - 1 + offset]

verrechnest du dich, und greifst auf eine nicht-existierende Row zu.

von Martin L. (tempusertempuser)


Lesenswert?

Εrnst B. schrieb:
> Martin L. schrieb:
>> TypeError: Cannot read properties of undefined (reading 'cells') at
>> 'myFunction'
>>
>> Was mache ich da falsch?
>
> Hier:
> Martin L. schrieb:
>> rows[index - 1 + offset]
>
> verrechnest du dich, und greifst auf eine nicht-existierende Row zu.

Wie muss die Zeile dann richtig heißen?

von Εrnst B. (ernst)


Lesenswert?

Martin L. schrieb:
> Wie muss die Zeile dann richtig heißen?

Hängt davon ab, was du da auslesen wolltest.

Ich würde davor eine Zeile einfügen:
1
  console.log(`Bei Iteration ${index} wird mit Offset ${offset} auf Row ${index - 1 + offset} von ${rows.length} zugegriffen`);
Oder mit dem Debugger dort einen Breakpoint setzen, und die Variablen 
anschauen.

: Bearbeitet durch User
von Martin L. (tempusertempuser)


Lesenswert?

Εrnst B. schrieb:
> Martin L. schrieb:
>> Wie muss die Zeile dann richtig heißen?
>
> Hängt davon ab, was du da auslesen wolltest.
>
> Ich würde davor eine Zeile einfügen:
>
1
>   console.log(`Bei Iteration ${index} wird mit Offset ${offset} auf Row 
2
> ${index - 1 + offset} von ${rows.length} zugegriffen`);
3
>
> Oder mit dem Debugger dort einen Breakpoint setzen, und die Variablen
> anschauen.

Hallo ich habe nun einen neune versuch gestartet
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
.tg  {
6
  border-collapse: collapse;
7
  border-spacing: 0;
8
}
9
.tg td {
10
  font-family: Arial, sans-serif;
11
  font-size: 14px;
12
  padding: 10px 5px;
13
  border-style: solid;
14
  border-width: 1px;
15
  overflow: hidden;
16
  word-break: normal;
17
}
18
.tg th {
19
  font-family: Arial, sans-serif;
20
  font-size: 14px;
21
  font-weight: normal;
22
  padding: 10px 5px;
23
  border-style: solid;
24
  border-width: 1px;
25
  overflow: hidden;
26
  word-break: normal;
27
}
28
</style>
29
<script>
30
function myFunction() {
31
function tableToJson(html) {
32
    // parse html string into dom object
33
    const doc = new DOMParser().parseFromString(html, "text/html");
34
    // extract table node
35
    const table = doc.querySelector("table");
36
    // extract header names from first row. NOTE: map cannot be called on result of querySelectorAll, it has to be converted to an array using spread operator first
37
    const headers = [...table.querySelectorAll("th")].map((h) => h.textContent);
38
    const json = [];
39
    // iterate through rows not containing table headers
40
    table.querySelectorAll("tr:not(:has(th))").forEach((row) => {
41
        
42
        const item = {};
43
        // check if td needs a new json array item
44
        const spanned = row.querySelector("td[rowspan]");
45
        const rowspan = spanned ? parseInt(spanned.getAttribute("rowspan")) : 0;
46
         console.log(rowspan);
47
        // process all td nodes in row
48
        row.querySelectorAll("td").forEach((td, index) => { if (td.textContent){ 
49
        
50
        item[headers[index]] = td.textContent;
51
        } 
52
        })
53
        
54
        // append current item to json array
55
        if (rowspan || json.length === 0) {
56
            // cell is spanned, wrap it in an array under 'json'
57
            json.push([item]);
58
        }
59
        else {
60
            // push item to last array in 'json'
61
            json[json.length - 1].push(item);
62
        }
63
        //console.log(json);
64
    })
65
    return json;
66
}
67
let ele = document.getElementsByTagName( 'html' );
68
var htmlElements = document.getElementsByTagName('html');
69
//var htmlElements = htmlObject.getElementsByTagName("*");
70
var stringWithHtmlTobeSavedInTextArea="";
71
for (i = 0; i < htmlElements.length ; i++){
72
    stringWithHtmlTobeSavedInTextArea += htmlElements[i].outerHTML;
73
}
74
console.log(stringWithHtmlTobeSavedInTextArea);
75
const formatted = tableToJson(stringWithHtmlTobeSavedInTextArea);
76
console.log(formatted);
77
}
78
</script>
79
</html>
80
<body>
81
<button onclick="myFunction()">Click me</button>
82
<script>
83
// Nützliche Templating Funktionen
84
function html2fragment(html){
85
  const template = document.createElement("template");
86
  template.innerHTML = html;
87
  return template.content;
88
}
89
function TemplateInstance(root){
90
  const result = {};
91
  for(const element of Array.from(root.querySelectorAll('[\\@]'))){
92
    const name = element.getAttribute('@');
93
    element.removeAttribute('@');
94
    result[name] = element;
95
    element.classList.add('at-'+name);
96
  }
97
  result.fragment = root;
98
  return result;
99
}
100
function Template(html){
101
  const fragment = html2fragment(html);
102
  return (d=document)=>TemplateInstance(d.importNode(fragment, true));
103
}
104
// Tabelle aufbauen
105
const T_Table = Template(`
106
  <table class="tg" @="table">
107
    <thead>
108
      <th>a</th>
109
      <th>b</th>
110
      <th>c</th>
111
      <th>d</th>
112
    </thead>
113
  </table>
114
`);
115
const T_Row = Template(`
116
  <tr @="tr">
117
    <td class="tg-031e" @="a"></td>
118
    <td class="tg-031e" @="b"></td>
119
    <td class="tg-031e" @="c"></td>
120
  </tr>
121
`);
122
const T_GroupCells = Template(`<td @="id" class="tg-031e" rowspan="999999"></td>`);
123
function dataToTable(data){
124
  const e_table = T_Table();
125
  for(const [id,group] of Object.entries(data)){
126
    const tbody = document.createElement("tbody");
127
    let firstRow = null;
128
    for(const row of group){
129
      const e_row = T_Row();
130
      firstRow ??= e_row;
131
      e_row.a.textContent = row.a;
132
      e_row.b.textContent = row.b;
133
      e_row.c.textContent = row.c;
134
      tbody.appendChild(e_row.fragment);
135
    }
136
    const e_cells = T_GroupCells();
137
    e_cells.id.textContent = id;
138
    // Note, we could get all td in e_cells.fragment and set rowspan to the correct number, it's easier to just put the rows in a tbody and set rowspan to a high number to fill all the rows in the tbody
139
    firstRow.tr.prepend(e_cells.fragment);
140
    e_table.table.appendChild(tbody);
141
  }
142
  return e_table.fragment;
143
}
144
const text = '{"1":[{"a":"19:10","b":"20:30","c":"1"},{"a":"19:10","b":"20:30","c":"1"},{"a":"12:30","b":"13:40","c":3}],"2":[{"a":"14:10","b":"15:30","c":"2"},{"a":"9:30","b":"10:00","c":"3"}],"3":[{"a":"8:10","b":"8:20","c":"4"},{"a":"8:10","b":"8:20","c":"4"},{"a":"7:10","b":"7:20","c":"3"}],"4":[{"a":"8:10","b":"8:20","c":"5"},{"a":"6:20","b":"6:30","c":"f"}]}';
145
const data = JSON.parse(text);
146
const e_table = dataToTable(data);
147
document.body.appendChild(e_table);
148
</script>
149
</body>
150
</html>


allerdings gibt er mir nun folgendes aus
1
[[{"a":"1","b":"19:10","c":"20:30","d":"1"},{"a":"19:10","b":"20:30","c":"1"},{"a":"12:30","b":"13:40","c":"3"}],[{"a":"2","b":"14:10","c":"15:30","d":"2"},{"a":"9:30","b":"10:00","c":"3"}],[{"a":"3","b":"8:10","c":"8:20","d":"4"},{"a":"8:10","b":"8:20","c":"4"},{"a":"7:10","b":"7:20","c":"3"}],[{"a":"4","b":"8:10","c":"8:20","d":"5"},{"a":"6:20","b":"6:30","c":"f"}]]

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.