Issue with populating JsonRest store in Dojo Enhanced Datagrid

Question

Issue with populating JsonRest store in Dojo Enhanced Datagrid

My data grid is not loading the information from the store

The response I get from my REST call looks like this: {"onlineUsers":[],"offlineUsers":["123.456.7.890:8080"]}

This is what my code looks like:
require([  "dojo/store/JsonRest",
        "dojo/store/Memory",
        "dojo/store/Cache",
        "dojox/grid/EnhancedGrid",
        "dojox/grid/enhanced/plugins/Pagination",
        "dojo/data/ObjectStore",
        "dojo/dom-attr",
        "dojo/domReady!"],
        function(JsonRest, Memory, Cache, EnhancedGrid, Pagination, ObjectStore, domAttr){

        var store = new dojo.store.JsonRest({target:"/Url/rest/onlineusers/all"});

        var dataStore = new dojo.data.ObjectStore({objectStore: store});

        var grid = new EnhancedGrid({
            id: 'grid',
            store: dataStore,
            structure: [
          {name: "Offline Users", field: "offlineUsers", width: "100px"}
        ]
        }, "gridDiv");

            grid.startup();
    });

In the logs I see this message: [object Object]

I also notice this warning in the console: [18:12:57.822] Use of getAttributeNode() is deprecated. Use getAttribute() instead. @ http://ajax.googleapis.com/ajax/libs/dojo/1.8.4/dojo/dojo.js:146

What could be causing this issue?

javascript json datagrid dojo

Answer 1

Answer №1

It seems like the issue lies in the way your data structure is set up. Are you trying to display a grid where each host or address is listed as a separate row?

The correct data structure for a store should be an array of objects. In your current setup, you have defined an object with arrays of strings, which does not match the required structure. You can find more information on the formatting specifications for your REST service in the RFC 2616 document.

You have a few different options:

Adjust your RESTful webservice to return data in a compatible format for Dojo
Create your own custom store implementation
Parse your data on the client side by manually sending an AJAX request and mapping the object

If you choose the third option, your code might look something like this:

var data = {"onlineUsers":[],"offlineUsers":["123.456.7.890:8080"]}; // Fetch data with AJAX
var offlineUsers = array.map(data.offlineUsers, function(user) {
    return {
        host: user  
    };
});
var store = new Memory({ data: offlineUsers });
var dataStore = new ObjectStore({objectStore: store});

To update the structure property of your grid, use:

[
    {name: "Offline Users", field: "host", width: "100px"}
]

I have also created a JSFiddle demonstrating this example, which you can view here.

Answer 2

It seems like the issue lies in the way your data structure is set up. Are you trying to display a grid where each host or address is listed as a separate row?

The correct data structure for a store should be an array of objects. In your current setup, you have defined an object with arrays of strings, which does not match the required structure. You can find more information on the formatting specifications for your REST service in the RFC 2616 document.

You have a few different options:

Adjust your RESTful webservice to return data in a compatible format for Dojo
Create your own custom store implementation
Parse your data on the client side by manually sending an AJAX request and mapping the object

If you choose the third option, your code might look something like this:

var data = {"onlineUsers":[],"offlineUsers":["123.456.7.890:8080"]}; // Fetch data with AJAX
var offlineUsers = array.map(data.offlineUsers, function(user) {
    return {
        host: user  
    };
});
var store = new Memory({ data: offlineUsers });
var dataStore = new ObjectStore({objectStore: store});

To update the structure property of your grid, use:

[
    {name: "Offline Users", field: "host", width: "100px"}
]

I have also created a JSFiddle demonstrating this example, which you can view here.

Issue with populating JsonRest store in Dojo Enhanced Datagrid

Answer №1

Similar questions

Encountering a random error: org.json.JSONException: Cannot convert Value <!DOCTYPE of type java.lang.String to JSONObject

Accessing JSON output to retrieve data from an Asterix file

Slider with a progress bar

Troubleshooting the JSONArray issue: Resolving difficulties in retrieving data on Android Studio

Develop a dynamic animation using gradient and opacity properties

How can we dynamically reference past elements in an array without using indices like "i-1", "i-2", and so on?

Detecting Null Values

When using AutoComplete in MUI, I encountered an issue while attempting to assign a default value to the checkbox from an API. Instead of achieving the desired result, I received an error stating "(inter

Please provide the parameter in JSON format when using Sails

ReactJs allows for fluid scroll animations that persist as long as the mouse is clicked or a button

Submitting modal form information using AJAX to PHP

Exploring Mathematical Functions Using React State Management

Javascript unable to access SVG element content on mobile Safari

The contents of my script.js file do not align with the code in the mail

What could be the reason for the failure of Angular Material Table 2 selection model?

Struggling with Mootools selectors

Obtain the contents of the table row td element within the specified div class without relying on

Difficulty with changing JSON keys in jq not functioning as expected

Executing a click on a checkbox element in Python with Selenium

Validation of forms in Angular using a pseudo submission method