js als Tabelle darstellen

[chris47803]

Im folgenden Script möchte ich die Ausgabe von id:, icon: und suffix: gerne als Tabelle ausgeben.

  {
    module: 'MMM-ioBroker',
    position: 'top_right',
    header: "     ",   
    config: {
      host: '192.168.2.61',
      port: '8088',
      https: false,
      template: 'MMM-ioBroker.njk',
      devices: [
          { name: 'Küche',
            deviceStates: [
                              { id: '0_userdata.0.Heizung.Kueche',              icon: 'wi wi-thermometer',        suffix: ' °C'},
                              { id: 'fritzdect.0.DECT_099950214189.battery',    icon: 'fa fa-battery-half',       suffix: '%'}                             

                          ]
          },
          
          { name: 'Bad',
            deviceStates: [
                              { id: '0_userdata.0.Heizung.Bad',                 icon: 'wi wi-thermometer',        suffix: ' °C' },
                              { id: 'fritzdect.0.DECT_099950216627.battery',    icon: 'fa fa-battery-half',       suffix: '%'}                               
                            
                          ]
          },
          
          { name: 'Serverraum',
            deviceStates: [
                              { id: '0_userdata.0.Heizung.Serverraum',          icon: 'wi wi-thermometer',        suffix: ' °C' },
                              { id: 'fritzdect.0.DECT_099950273573.battery',    icon: 'fa fa-battery-half',       suffix: '%'}                               
                              
                          ]
          },
          
          { name: 'Schlafzimmer',
            deviceStates: [
                              { id: '0_userdata.0.Heizung.Schlafzimmer',        icon: 'wi wi-thermometer',        suffix: ' °C'},
                              { id: 'fritzdect.0.DECT_099950279527.battery',    icon: 'fa fa-battery-half',       suffix: '%'}                               
                              
                          ]
          },
          
         { name: 'Büro',
            deviceStates: [
                              { id: '0_userdata.0.Heizung.Buero',               icon: 'wi wi-thermometer',        suffix: ' °C' },
                              { id: 'fritzdect.0.DECT_139790667712.battery',    icon: 'fa fa-battery-half',       suffix: '%'}                               
                              
                          ]
          },
          
         { name: 'Wohnzimmer',
            deviceStates: [
                              { id: '0_userdata.0.Heizung.Wohnzimmer',          icon: 'wi wi-thermometer',        suffix: ' °C' },
                              { id: 'fritzdect.0.DECT_099950308576.battery',    icon: 'fa fa-battery-half',       suffix: '%'}                               
                              
                          ]
          },
          
                   { name: 'Aussentemperatur',
            deviceStates: [
                              { id: 'tuya.0.bfa3627a6b9002903fte1v.1',          icon: 'wi wi-thermometer'},
                              { id: 'tuya.0.bfa3627a6b9002903fte1v.2',          icon: 'wi wi-humidity',        suffix: '%' }                                                             
                          ]
          },
          
                   { name: 'AirRobo',
            deviceStates: [
                              { id: 'tuya.0.bfdcea245e055d2c20sj1i.106',        icon: 'fa fa-battery-half',    suffix: '%' }                                                           
                          ]
          },
          
                   { name: 'Briefkasten',
            deviceStates: [
                              { id: 'tuya.0.bf538c2e67ace7ad3eky7f.4',          icon: 'fa fa-battery-half',    suffix: '%' }                                                           
                          ]
          },     
          
                             { name: 'Türspion',
            deviceStates: [
                              { id: 'alias.0.Tuerspion.145',          icon: 'fa fa-battery-half',    suffix: '%' }                                                           
                          ]
          }                 
          
        ]
    }
  },

 

[mo]

Hi,
probier mal so:

function createTable(devices) {
  const table = document.createElement('table');
  table.border = '1';

  // Create table header
  const header = table.createTHead();
  const headerRow = header.insertRow();
  const headers = ['ID', 'Icon', 'Suffix'];
  headers.forEach(headerText => {
    const cell = document.createElement('th');
    cell.textContent = headerText;
    headerRow.appendChild(cell);
  });

  // Create table body
  const tbody = table.createTBody();
  devices.forEach(device => {
    device.deviceStates.forEach(state => {
      const row = tbody.insertRow();
      Object.values(state).forEach(text => {
        const cell = row.insertCell();
        cell.innerHTML = text;
      });
    });
  });

  return table;
}

document.body.appendChild(createTable(devices));

 

[chris47803]

Hallo.
Vielen Dank für deine Antwort.
Leider weiß ich nicht an welche Stelle ich das einbauen muss.

LG
Chris

 

[mo]

const devices = [
  { name: 'Küche',
    deviceStates: [
      { id: '0_userdata.0.Heizung.Kueche', icon: 'wi wi-thermometer', suffix: ' °C'},
      { id: 'fritzdect.0.DECT_099950214189.battery', icon: 'fa fa-battery-half', suffix: '%'}                             
    ]
  },
  ...
];

function createTable(devices) {
...
}

 

[chris47803]

Startet leider nicht.

Stockt schon, wenn ich aus devices const devices mache.

 

[mo]

zeig mal den ganzen code

 

[chris47803]

Musste die Datei packen und anhängen.

 

[mo]

Ich hab´s mir schon gedacht, dass es um einen MagicMirror geht. Das ist zu speziell für ein allg. JS-Forum, da würde ich dir raten, ein MM-Forum zu suchen und dort nachzufragen.
Gerne kannst Du das Ergebnis dann hier posten oder verlinken.