JSON-Objekt aus Datasnap-Server mit JavaScript weiter verarbeiten.

[TiGü]

Hallo Gemeinde,

ich habe einen Datasnap-Server mit diesen WebMethods-Datenmodul.
Ich möchte Daten von dem Server abholen und per HTML-Seite zur Anzeige bringen.

Gegen sei diese Datenstruktur:

Delphi-Quellcode:

  TDeviceInfo = class
  public
    SerialNumber: Integer;
    Name: string;
    Data: string;
  end;

  TDeviceInfoContainer = class
    Devices: TArray<TDeviceInfo>;
  end;

  TDeviceInfoList = TObjectList<TDeviceInfo>;

Das Erzeugen des JSON-Strings geschieht so:

Delphi-Quellcode:

function TDeviceListener.GetDeviceInfoList: string;
var
  DeviceInfo: TDeviceInfo;
  DeviceInfoList: TDeviceInfoList;
  DeviceInfoContainer: TDeviceInfoContainer;
  Item: TPair<Integer, string>;
begin
  DeviceInfoList := TDeviceInfoList.Create;
  try
    for Item in FDeviceDictionary do
    begin
      DeviceInfo := TDeviceInfo.Create;

      DeviceInfo.SerialNumber := Item.Key;
      DeviceInfo.Name := Item.Value;
      DeviceInfo.Data := FDataList.GetViewData(DeviceInfo.SerialNumber);

      DeviceInfoList.Add(DeviceInfo)
    end;

    DeviceInfoContainer := TDeviceInfoContainer.Create;
    try
      DeviceInfoContainer.Devices := DeviceInfoList.ToArray;
      Result := TJson.ObjectToJsonString(DeviceInfoContainer);
    finally
      DeviceInfoContainer.Free;
    end;
  finally
    DeviceInfoList.Free;
  end;
end;

Das Result sieht dann als Delphi-String so aus:

Delphi-Quellcode:

'{
   "devices": [{
      "serialNumber": 12345,
      "name": "Station 1",
      "data": ""
   }, {
      "serialNumber": 54321,
      "name": "Gerät 1",
      "data": "09.05. 13:55:18 Logeintrag 1\r\n09.05. 13:55:18 ISO\r\n09.05. 13:55:18 Logeintrag 2\r\n09.05. 13:55:18 Logeintrag 3\r\n09.05. 13:55:18 Logeintrag 4 \r\n09.05. 13:55:18 Logeintrag 5\r\n"
   }]
}'

Das scheint auch ein valides JSON zu sein.

Mein Problem ist jetzt, wie ich das auf der Javascript-Seite auseinander gefummelt kriege. Ich bin da etwas unbefleckt und habe gerade gar keinen Ansatz.

Code:

// Javascript:
var devicesObject = serverMethods().GetDeviceInfo();

Laut Console des Chrome steht auch das richtige drin und es wird als Object interpretiert (siehe Bildanhang).
Ich habe aber irgendwie keinen Ansatz, wie ich an die einzelnen Elemente des Arrays kommen soll, geschweige denn an die einzelnen Werte serialNumber, name oder data.
Das Javascript-object selber bietet mir nur result als Eigenschaft.

Weiß jemand Rat?

[TiGü]

Boah, kaum tippert man mal das Problem in die Praxis, schon kommt von ganz allein die Lösung:

Code:

         function onGetDevicesClick()
         {
           if (loginRequired && (AdminInst == null))
           {
             showLogin(true);
             return;
           }

         var devicesObject = serverMethods().GetDeviceInfo();
         var devicesArrayObject = JSON.parse(devicesObject.result);
         var devicesArray = devicesArrayObject.devices;         
         
         for (var device in devicesArray)
         {
            var entry = document.getElementById('serial_number_id');
            entry.innerHTML = devicesArray[device].serialNumber;
            var entry = document.getElementById('name_id');
            entry.innerHTML = devicesArray[device].name;
            var entry = document.getElementById('status_id');
            entry.innerHTML = devicesArray[device].data;      

         }
         }

Jetzt wäre nur noch die Frage, ob das auch eleganter geht? Oder ist "okayes" JavaScript?

[BUG]

Ich persönlich würde device in deviceIndex umbenennen und device am Anfang der Schleife das Objekt zuweisen.
Wenn du öfter Code schreibst, der Daten in DOM-Elemente übersetzt, solltest du dir mal ein Object-Binding-Framework (z.B. AngularJS) angucken.

Außerdem scheinst du Rechte auf Client-Seite zu überprüfen!? Das machst du hoffentlich auf Server-Seite noch mal

[TiGü]

So sieht es jetzt zur Zeit aus:

Code:

         function ShowDeviceInfo() {
            var devicesObject = serverMethods().GetDeviceInfo();
            var devicesArrayObject = JSON.parse(devicesObject.result);
            var devicesArray = devicesArrayObject.devices;

            for (var deviceIndex in devicesArray) {
               var singleDevice = devicesArray[deviceIndex];
               AddDeviceRow(singleDevice);
            }

         }

         function AddDeviceRow(singleDevice) {
            var table_id = "tabelle1";
            var table = document.getElementById(table_id);
            var rows = table.getElementsByTagName("tr").length;
            var tr = table.insertRow(rows);
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");
            td1.innerHTML = "online";
            td2.innerHTML = singleDevice.serialNumber;
            td3.innerHTML = singleDevice.name;
            td4.innerHTML = singleDevice.data;
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
         }

Ich habe eine Tabelle, die ich mit den Werten fülle.
ShowDeviceInfo() rufe ich im OnLoad() auf.

Du meinst sicher das Prüfen im

Delphi-Quellcode:

procedure TWebServerModule.DSAuthenticationManagerUserAuthenticate(
  Sender: TObject; const Protocol, Context, User, Password: string;
  var valid: Boolean; UserRoles: TStrings);

, richtig?
Ja, das steht auch noch auf der Tagesordnung.