CODEWITHSUNDEEP
javascriptjquerygridjsgrid
littlea1991
littlea1991

Reputation: 13

using js-grid for displaying static data

I'm currently new to Javascript and right now using this JS-grid in an Example about Prime Numbers. I have an Array with Prime Numbers: Array(4) [ " 2", " 3", " 5", " 7" ].

Which the console.log shows is populated with these values. I'd like to import it into the JS-Grid but it never displays the values in each row, but only all Values of the Array in one row. Here is my configuration right now:

var clients = [{
    "Primenumber": Primenumber
}];

$("#jsGrid").jsGrid({
    width: "100%",
    height: "400px",

    inserting: true,
    editing: true,
    sorting: true,
    paging: true,

    data: clients,

    fields: [{
            name: "Primenumber",
            type: "text",
            width: 150
        },{
            type: "control"
        }
    ]
});

Am I importing the Array into the JS-Grid wrong? I'm not sure how to display each value of the Array in a seperate row. Thank you guys in Advance for your Answer!

Upvotes: 1

Views: 1543

Answers (1)

LexJacobs
LexJacobs

Reputation: 2533

Per the documentation:

data An array of items to be displayed in the grid. The option should be used to provide static data. Use the controller option to provide non static data.

I noticed that you are only passing an array with one value to the data key

var clients = [{
  "Primenumber": Primenumber
];

This is equivalent to passing:

var clients = [{
  Primenumber: [" 2", " 3", " 5", " 7"]
}]

and even though the Primenumber key has an associated value with multiple elements, the containing object itself is only a single value inside of the array.

I wonder what happens if you instead pass:

var clients = Primenumber;

and in doing so, you're passing the array itself.

Finally, to have your values show up, you have to have them in the data array as keyvalue pairs:

var Primenumber = [{Primenumber:" 2"}, {Primenumber: " 3"}, {Primenumber: " 5"}, {Primenumber: " 7"},];
var clients = Primenumber;

Working example here

Illustrative example in the official documentation here

Upvotes: 1

Related Questions