Leveraging JavaScript to unpack references within a intricate object network obtained through SignalR/Json.NET

Question

Leveraging JavaScript to unpack references within a intricate object network obtained through SignalR/Json.NET

Utilizing SignalR to send back a complex object hierarchy to my JavaScript client has proven challenging. The JSON structure produced by SignalR/Json.NET contains multiple references to the same object, resulting in a convoluted output like this:

{
    "$id": "57",
    "Name": "_default",
    "User": {
        "$id": "58",
        "UserTag": "ken",
        "Sessions": [{
            "$id": "59",
            "SessionId": "0ca7474e-273c-4eb2-a0c1-1eba2f1a711c",
            "User": {
                "$ref": "58"
            },
            "Room": {
                "$ref": "57"
            }
        }],
    },

    "Sessions": [{
        "$ref": "59"
    }]
}

Dealing with these references during deserialization in JavaScript presents challenges, as simply having $ref fields is not ideal. I'm exploring options on how to best deserialize these objects in order to receive the correct instances in the intended places.

I could attempt to create a custom deserializer, but I suspect that there might be existing solutions out there that address this specific issue. Any insights or recommendations would be greatly appreciated.

Edit:

It appears that there is an IETF draft proposal and even a preliminary implementation by Douglas Crockford available for handling such scenarios. However, the schema used in the IETF proposal differs from that of Json.NET, adding another layer of complexity to the situation.

javascript json json.net deserialization signalr

Answer 1

Answer №1

This modified version of Crockford's cycle.js now handles the reference format Json.NET uses. Translated into TypeScript for a more robust coding experience, it appears to successfully manage complex object graphs thus far, with potential bugs that I'm willing to address if pointed out.

export function retrocycle(obj: any): void {
    var catalog: any[] = [];
    catalogObject(obj, catalog);
    resolveReferences(obj, catalog);
}

function catalogObject(obj, catalog: any[]):void {

    // The catalogObject function walks recursively through an object graph
    // looking for $id properties. When it finds an object with that property, then
    // it adds it to the catalog under that key.

    var i: number;
    if (obj && typeof obj === 'object') {
        var id:string = obj.$id;
        ...
    }
}

function resolveReferences(obj: any, catalog: any[]) {

    // The resolveReferences function walks recursively through the object looking for $ref
    // properties. When it finds one that has a value that is an id, then it
    // replaces the $ref object with a reference to the object that is found in the catalog under
    // that id.

    var i:number, item:any, name:string, id:string;
    if (obj && typeof obj === 'object') {
        if (Object.prototype.toString.apply(obj) === '[object Array]') {
            ...
        } else {
            ...
        }
    }
}

The equivalent JS:

...

Utilize it like this (assuming SignalR hubs are connected):

$.connection.roomHub.server.joinRoom()
    .done(function(room) {
        retrocycle(room);
    });

A repository can be found on BitBucket here: https://bitbucket.org/smithkl42/jsonnetdecycle.

Answer 2

This modified version of Crockford's cycle.js now handles the reference format Json.NET uses. Translated into TypeScript for a more robust coding experience, it appears to successfully manage complex object graphs thus far, with potential bugs that I'm willing to address if pointed out.

export function retrocycle(obj: any): void {
    var catalog: any[] = [];
    catalogObject(obj, catalog);
    resolveReferences(obj, catalog);
}

function catalogObject(obj, catalog: any[]):void {

    // The catalogObject function walks recursively through an object graph
    // looking for $id properties. When it finds an object with that property, then
    // it adds it to the catalog under that key.

    var i: number;
    if (obj && typeof obj === 'object') {
        var id:string = obj.$id;
        ...
    }
}

function resolveReferences(obj: any, catalog: any[]) {

    // The resolveReferences function walks recursively through the object looking for $ref
    // properties. When it finds one that has a value that is an id, then it
    // replaces the $ref object with a reference to the object that is found in the catalog under
    // that id.

    var i:number, item:any, name:string, id:string;
    if (obj && typeof obj === 'object') {
        if (Object.prototype.toString.apply(obj) === '[object Array]') {
            ...
        } else {
            ...
        }
    }
}

The equivalent JS:

...

Utilize it like this (assuming SignalR hubs are connected):

$.connection.roomHub.server.joinRoom()
    .done(function(room) {
        retrocycle(room);
    });

A repository can be found on BitBucket here: https://bitbucket.org/smithkl42/jsonnetdecycle.

Leveraging JavaScript to unpack references within a intricate object network obtained through SignalR/Json.NET

Answer №1

Similar questions

There seems to be an issue with Jquery Ajax retrieving information from an ASP.NET WEB API

updating a d3js line graph in real-time using JSON information

I'm having trouble with my Selenium as it doesn't seem to be able to open

Utilize JavaScript to Forward Subdomain to Main Domain

The Bootstrap Modal containing a JQuery Validation Form refuses to submit even after successful validation

Working with Angular 4 and Typescript: Transforming JSON data with json2typescript key mapping

Using the requests library in Python to simulate an AJAX request simulation

What could be the reason for the variable not resetting in my event handler?

Struggling to interpret JSON using JavaScript and Ajax

Unable to upload a file to an email using the mandrillapp JSON API

What steps should I take to incorporate Bootstrap's JavaScript into Vue (Gridsome)?

A step-by-step guide on retrieving a value from a DateTime picker in a React application

Error message encountered when submitting a form after receiving an AJAX response: VerifyCsrfToken Exception

Solving template strings in a future context

What is the JSON format for a ticket booking system using Firebase as the database?

what is the best way to ensure the execution of requests within async.each in nodejs?

Discover the final index of an array with Angular's ng-repeat functionality

Guide to displaying API data in HTML format

Is it possible to include a callback function as a property in an object in React?

The Clash of Form Action and JavaScript