Protobuf : WebApi -> JS - Decoded object is empty

Question

I would like to send an object from a WebApi controller to an Html page through an Ajax Request.

When I receive the object in JS, it's empty. But server-side the object isn't empty because when I look at the byte[].length it's greater than 0.

• Server-side, I use the dll provided by Google.

• JS side, I use the ProtobufJS library. This is my .proto file :

  syntax="proto3";
  
  message Container {
      repeated TestModel2 Models = 1;
  }
  
  message TestModel2 {
      string Property1 = 1;
      bool Property2 = 2;
      double Property3 = 3;
  }
  

  • Server code :

    var container = new Container();
    
    var model = new TestModel2
    {
        Property1 = "Test",
        Property2 = true,
        Property3 = 3.14
    };
    

    container.Models.Add(model);

  • Base64 data :

  ChEKBFRlc3QQARkfhetRuB4JQA==

  • JS decoding :

    var ProtoBuf = dcodeIO.ProtoBuf;
    var xhr = ProtoBuf.Util.XHR();
    xhr.open(
        /* method */ "GET",
        /* file */ "/XXXX/Protobuf/GetProtoData",
        /* async */ true
    );
    xhr.responseType = "arraybuffer";
    xhr.onload = function (evt) {
        var testModelBuilder = ProtoBuf.loadProtoFile(
            "URL_TO_PROTO_FILE",
            "Container.proto").build("Container");
        var msg = testModelBuilder.decode64(xhr.response); 
        console.log(JSON.stringify(msg, null, 4)); // Correctly decoded
    }
    xhr.send(null);
    

  • Result object in JS console :

    {
        "Models": []
    }
    

  • bytebuffer.js

  • protobuf.js v5.0.1

Answer 1

Finally i solved the problem by myself.

It was the client-side which was in fault.

• In fact the xhr.response is JSON format so it was between double quotes "ChEKBFRlc3QQARkfhetRuB4JQA==". I had to JSON.parse my response.enter code here
• I removed the xhr.responseType = "arraybuffer";

Here is my code now :

var ProtoBuf = dcodeIO.ProtoBuf;
var xhr = ProtoBuf.Util.XHR();
xhr.open(
    /* method */ "GET",
    /* file */ "/XXXX/Protobuf/GetProtoData",
    /* async */ true
);
// xhr.responseType = "arraybuffer"; <--- Removed
xhr.onload = function (evt) {
    var testModelBuilder = ProtoBuf.loadProtoFile(
        "URL_TO_PROTO_FILE",
        "Container.proto").build("Container");
    var msg = testModelBuilder.decode64(JSON.parse(xhr.response)); <-- Parse the response in JSON format
    console.log(msg); // Correctly decoded
}
xhr.send(null);