Brauche Hilfe in javascript programmierung

Martin L. #7666615
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

Angehängte Dateien:
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Martin L. #7666635
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

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Rolf #7666680
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?

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Εrnst B. #7666748
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.

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Martin L. #7666853
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?

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Heinz B. (Firma: Privat) #7667342
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 ?

Angehängte Dateien:
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Hans #7667956
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
 
}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Daniel A. #7668009
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

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Martin L. #7668356
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?

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Martin L. #7668864
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"}]]
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren