gridjs: server, how to map data for a simple json array - json

Question

I'm a java-script newbee, that's why I struggle with the mapping of a simple json array, if it is a response from a server. I've tested it with static json, and it works as expected:
new gridjs.Grid({
columns: [{
id: 'dateTime',
name: 'Timestamp'
}, {
id: 'host',
name: 'Host'
}, {
id: 'ipv4',
name: 'IPv4'
}, {
id: 'ipv6',
name: 'IPv6'
}],
data: [
{"dateTime": "2021-12-02 03:11:30.501","host": "master.myhost.com","ipv4": "93.215.66.14", "ipv6": "2003:cc:2fff:9e4:2e91:abff:febf:d839"},
{"dateTime": "2021-12-02 03:44:29.494", "host": "test.myhost.com", "ipv4": "93.203.250.190", "ipv6": "n/a"},
]
}).render(document.getElementById("wrapper"));
But if the same json array is delivered by a server, I don't know how to define my data mapping. That's what I've tried:
new gridjs.Grid({
columns: [{
id: 'dateTime',
name: 'Timestamp'
}, {
id: 'host',
name: 'Host'
}, {
id: 'ipv4',
name: 'IPv4'
}, {
id: 'ipv6',
name: 'IPv6'
}],
server: {
url: "http://localhost:8080/info/zone-log",
then: data => data.map([data.dateTime, data.host, data.ipv4, data.ipv6])
}
}).render(document.getElementById("wrapper"));
I get the following error on the JS console: '[Grid.js] [ERROR]: TypeError: [...] is not a function'.
Can somebody explain me, how to do the data mapping correctly?
Edit
Server response:
curl -i http://localhost:8080/info/zone-log
HTTP/1.1 200 OK
Date: Tue, 01 Mar 2022 08:53:39 GMT
Content-Type: application/json
Transfer-Encoding: chunked
[{"dateTime":"2021-12-02 03:11:30.501","host":"master.myhost.com","ipv4":"93.215.66.14","ipv6":"2003:cc:2fff:9e4:2e91:abff:febf:d839"},{"dateTime":"2021-12-02 03:44:29.494","host":"ursa.myhost.com","ipv4":"93.203.250.190","ipv6":"n/a"}, ...}
java-script console log:
data
Array(191) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
[0…99]
​​0: Object { dateTime: "2021-12-02 03:11:30.501", host: "master.myhost.com", ipv4: "93.215.66.14", … }
​​1: Object { dateTime: "2021-12-02 03:44:29.494", host: "ursa.myhost.com", ipv4: "93.203.250.190", … }
[Grid.js] [ERROR]: TypeError: [...] is not a function log.ts:12:21

Answer 1

Looks like data that you are getting is not an array. Hence data.map() is giving type error. Can you please console log the data and see what's coming?
new gridjs.Grid({
columns: [{
id: 'dateTime',
name: 'Timestamp'
}, {
id: 'host',
name: 'Host'
}, {
id: 'ipv4',
name: 'IPv4'
}, {
id: 'ipv6',
name: 'IPv6'
}],
server: {
url: "http://localhost:8080/info/zone-log",
then: data => {
console.log("data", data);
return data.map([data.dateTime, data.host, data.ipv4, data.ipv6])
}
}
}).render(document.getElementById("wrapper"));
Most probably the required array is inside another object in data.