jQuery - jquery-3.4.1.min.js:2 Uncaught ReferenceError: filter is not defined
Question
I am using jsGrid with a local json file as the data source. I set up a local json-server running on port 4000 to serve the dynamic data. When I hit http://localhost:4000/networks , I see the json just fine. I also set up a local http server with npm 's http-server package to hit my web page. However, when I try to hit http://localhost:8080 , I get a blank page. In the dev console, I am seeing this error: jquery-3.4.1.min.js:2 Uncaught ReferenceError: filter is not defined . I am a bit new to jQuery , and not sure why this error is happening. Below is my directory structure, my html file, js, sample json, and the error.
Tree:
.
└── src
├── data
│ └── scan.json
├── hosts.js
├── index.html
├── jsgrid-theme.css
├── jsgrid-theme.min.css
├── jsgrid.css
├── jsgrid.js
├── jsgrid.min.css
├── jsgrid.min.js
└── style.css
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="style.css" rel="stylesheet">
<link href="jsgrid.min.css" rel="stylesheet">
<link href="jsgrid-theme.min.css" rel="stylesheet">
</head>
<body>
<div id="jsGrid"></div>
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="hosts.js"></script>
</body>
</html>
JSON:
{
"networks": [
{
"id": "dc34ec44-aba0-4a9c-9ea0-cbacf48a15e4",
"ip": "192.168.0.4",
"mac": "8c:85:90:ae:10:24",
"packets_received": 74,
"packets_sent": 97,
"data_sent": 1352,
"data_received": 1076
},
{
"id": "b367bc81-b6d0-4c10-86e0-f7394bf2489e",
"ip": "192.168.0.7",
"mac": "00:d0:2d:e9:ae:88"
},
{
"id": "d46f11d4-e384-42b3-95d4-5eadc19b6552",
"ip": "192.168.0.8",
"mac": "34:93:42:06:01:4c"
},
{
"id": "47da3cb0-ee30-44ad-a1c3-bbf542ffeae3",
"ip": "17.249.121.246",
"mac": "f8:a0:97:87:11:0e",
"packets_received": 18,
"packets_sent": 7,
"data_sent": 156,
"data_received": 256
}
]
}
JS:
$(function() {
$("#jsGrid").jsGrid({
width: "auto",
height: "auto",
filtering: true,
editing: false,
sorting: true,
paging: true,
pageLoading : true,
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "http://localhost:4000/networks",
data: filter,
dataType: "json"
});
}
},
data: filter,
fields: [
{ name: "ip", type: "text", width: 100 },
{ name: "mac", type: "text", width: 100 },
{ name: "packets_received", type: "number", width: 20 },
{ name: "packets_sent", type: "number", width: 20 },
{ name: "data_received", type: "number", width: 20 },
{ name: "data_sent", type: "number", width: 20 },
]
})
})
Error:
jquery-3.4.1.min.js:2 Uncaught ReferenceError: filter is not defined
at HTMLDocument.<anonymous> (hosts.js:24)
at e (jquery-3.4.1.min.js:2)
at t (jquery-3.4.1.min.js:2)
1 answers
solution1
0 2020-01-12 08:27:41
You have two occurrences of the line data: filter ; you don't want those.
According to the jsGrid documentation , the loadData method of the controller should return an array of data matching the structure you've defined in the fields property.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.