We Keep Coding

How to use Kendo UI on Multi Select with Search using Post API

I have added Kendo UI on multi-select and use Post API to fetch the data on the basis of the search.
Here is the code in which I have tried to implement it.
var searchx = ""
var ds = new kendo.data.DataSource({
transport: {
read: {
url : "https://searchapi/list",
type: 'POST',
data: function (params) {
console.log("1");
var searchTerm = params.term && params.term != "" ? params.term : searchx;
var query = {
"txt": [
{
"txt: "Level4",
"values": [
"1819"
]
},
{
"txt": "Level3",
"values": []
},
{
"txt": "Level2",
"values": []
},
{
"txt": "Leve1",
"values": [
"278"
]
}
],
"xyz": [
{
"dt": "2022-04-24",
"field": "startDate"
},
{
"dt": "2022-05-24",
"field": "endDate"
}
],
"sorts": [],
"limit": 50,
"q": searchTerm
}
searchx = searchTerm;
console.log("2");
console.log(JSON.stringify(query));
return JSON.stringify(query);
//return Json(ds, JsonRequestBehavior.AllowGet);
},
contentType: 'application/json',
dataType: 'json',
success: function(data){
},
datatype: "json",
beforeSend: function (xhr) {
console.log('beforeSend');
xhr.setRequestHeader('Authorization','Bearer #Session.AuthToken~');
}
}
},
serverFiltering: true,
serverSorting: true,
placeholder: "Select One..."
});
$("#Tasks").kendoMultiSelect({
placeholder: "Select Tasks...",
filter: "contains",
autoBind: false,
dataValueField: "objectId",
dataTextField : "title",
dataSource : ds
});
Autocomplete / Typeahead search . I have created a Multi-select control by using kendo.The Multi-Select is not working Can anybody can help me with this

Retrieving data from db.json file and adding it into an array using javascript

I'm using ajax and javascript for a game and I created a server using json-server where I keep a db.json file with words that the user can input and become available in the game.
db.json
This is what the json file looks like
{
"words": [
{
"cuvant": "cuvant",
"id": 1
},
{
"cuvant": "masina",
"id": 2
},
{
"cuvant": "oaie",
"id": 3
},
{
"cuvant": "carte",
"id": 4
},
{
"cuvant": "fmi",
"id": 5
},
{
"cuvant": "birou",
"id": 6
},
{
"cuvant": "birou",
"id": 7
},
{
"cuvant": "canapea",
"id": 8
},
{
"cuvant": "pasare",
"id": 9
I managed to get the POST request (adding the words to the db.json) using this:
function addWord() {
var word = document.getElementById("input-name").value;
var info = {
cuvant: word
}
$.ajax({
url:'http://localhost:3000/words',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(info),
succes: function(info) {
console.log(info)
},
error: function(error) {
console.log(error);
}
})
}
This is what I tried for the GET request
But I'm not sure if it's correct.
And I also need a way to get only the value hold by the cuvant key and add it into an array.
window.onload = function() {
function gett() {
$.ajax({
url: 'http://localhost:3000/words',
type: 'GET',
dataType: 'json',
contentType: "application/json",
succes: function(data) {
console.log(data);
},
error: function(data) {
console.log(data)
}
})
.done(function(){
console.log("Over")
})
}
}

I think your code is correct. It was just missing the "s" on "success":
window.onload = function() {
function gett() {
$.ajax({
url: 'http://localhost:3000/words',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(data) {
console.log(data)
}
})
.done(function(){
console.log("Over")
})
}
}

Cannot put "body' in fetch post request

I have a problem with posting data throw REST API and fetch request. The request status is 200, and object goes to data base, but without body:( Since i use Insomnia, object only have an id and some "__v" key. Here`s result in data base
{
"_id": "5aa7c133610f563a089d9ccf",
"__v": 0
},
{
"_id": "5aa7c134610f563a089d9cd0",
"__v": 0
},
and my API function
function api(endpoint) {
endpoint = `http://localhost:3030/api/${endpoint}`;
return {
get() {
return fetch(endpoint)
},
post(body) {
return fetch(endpoint, {
method: 'POST',
headers: {'Content-Type':'application/x-www-form-urlencoded'},
body: JSON.stringify(body)
});
},
delete() {
return fetch(endpoint, {
method: 'DELETE'
})
}
}
}
let obj = {
name: "Apple",
nutritional_value: 100,
proteins: 200,
fats: 120,
carbohydrates: 3215,
description: "some delicious apple",
image: "apple.png",
type: "fruit"
};
api('food').post(obj);
So, what`s the problem? Help, please:)

jQuery UI autocomplete in AJAX/JSON

I have a problem with jQuery UI autocomplete that I'm trying to resolve with a lot of research and only resolved it partialy. I've managed to make it work at all with this code:
$("#term").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://wger.de/api/v2/exercise/?format=json",
type: "GET",
data: { name: request.term },
dataType: "json",
success: function(data) {
response($.map(data, function(item) {
return {
label: item,
value: item
}
}));
}
});
}
});
I'm working with open source API in JSON, here is an example:
{
"count": 1,
"next": null,
"previous": null,
"results": [
{
"id": 436,
"license_author": "Andrew Carothers",
"status": "1",
"description": "<p>1 Minute for each exercise</p>\n<ol>\n<li>Hold feet 6 inches off ground</li>\n<li>Crunches</li>\n<li>Side Crunches (L)</li>\n<li>Side Crunches (R)</li>\n<li>Heel Touches</li>\n<li>Plank Crunch</li>\n<li>Scissor Kicks</li>\n<li>Swim Kicks</li>\n<li>V Crunches</li>\n<li>Hold feet 6 in off ground</li>\n</ol>\n<p>Exercises can be substituted to vary workout</p>",
"name": "10 Min Abs",
"name_original": "10 Min Abs",
"creation_date": "2016-12-09",
"uuid": "3c5f6e1c-cb22-4a9f-a13e-d14afeb29175",
"license": 2,
"category": 10,
"language": 2,
"muscles": [],
"muscles_secondary": [],
"equipment": []
}
]
}
I want to get autocomplete suggestions with letters from "name" in JSON, but instead I've got whole JSON array, even with non-existing objects. I've already tried item.results[0].name, but everything I've got is TypeError: item.results is undefined. How to modify $.ajax to get "name" value of JSON object in autocomplete suggestions?
Thanks for any help.

does this work :
$("#term").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://wger.de/api/v2/exercise/?format=json",
type: "GET",
data: { name: request.term },
dataType: "json",
success: function(data) {
response($.map(data.results, function(index,item) {
return {
label: item.name,
value: item.name
}
}));
}
});
}
});

passing json array to ajax call in Javascript

guys i know its dummy questions but i spent hours on this and cant reach .. I am trying to pass a JSON array to JSP via an AJAX call in another JS file. It is giving me a 404 error. Any help would be appreciated. Here is my code:
function GridLibrary(fileName) {
this.fileName = fileName;
}
GridLibrary.prototype = {
setFileName : function(fileName) {
this.fileName = fileName;
},
getFileName : function() {
return this.fileName;
}
};
GridLibrary.prototype.display = function() {
$.ajax({
url : this.getFileName(),
dataType: "json",
error : function(that, e) {
console.log(e);
},
success : function(data) {
alert("found");
}
});
};
var Json = [{
"id": 1,
"name": "name1",
"age" : 10,
"feedback": "feedback1"
}, {
"id": 2,
"name": "name2",
"age" : 90,
"feedback": "feedback2"
}, {
"id": 3,
"name": "name3",
"age" : 30,
"feedback": "feedback3"
}, {
"id": 4,
"name": "name4",
"age" : 50,
"feedback": "feedback4"
}];
new GridLibrary(Json).display();

You need to have a valid url to send the values to the backend:
function GridLibrary(url, data) {
this.url = url;
this.data = data;
}
GridLibrary.prototype = {
setData: function(data) {
this.data = data;
},
getData: function() {
return this.data;
},
setUrl:function(url){ this.url = url; },
getUrl:function(){ return this.url; },
display : function() {
$.ajax({
url: this.getUrl, // <----the url where you want to send the data
data:this.getData, //<----should be the array data
dataType: "json",
contentType:"application/json", // <----add this contentType
error: function(that, e) {
console.log(e);
},
success: function(data) {
alert("found");
}
});
}
};
var url = '/url/to/send',
data = [{}....];
new GridLibrary(url, data).display();