I have a working fiddle, but the autocomplete does not display anything in the browser. The fiddle can be seen here: Working Fiddle
In the HTML, I have one input element for testing purposes:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type ="text/javascript" src="myScripts.js"></script>
<script type ="text/javascript" src="jquery.csv-0.71.js"></script>
<script type ="text/javascript" src="csvToArray.v2.1.js"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>Test</h1>
</div>
<div id="contentDiv" data-role="content">
<input type="text" id="food" placeholder="Type (First Name) Here" />
</div>
</div>
</body>
In my javascript, I am initializing a json variable by reading text from a file. I have tested that my initialization is successful by displaying an alert of my json variable. I am trying to use that json variable as the source in my autocomplete. Below, I have simplified my javascript by hard coding the initialization of the json variable in order to narrow down the problem:
var jsonVersion =
[{"description":"mac and cheese", "servingSize":"1 cup", "calories":"500"},
{"description":"slice of pizza", "servingSize":"1 slice", "calories":"400"},
{"description":"oreo cookie", "servingSize":"1 cookie", "calories":"100"},
{"description":"salad", "servingSize":"1 cup", "calories":"50"},
{"description":"apple", "servingSize":"1 apple", "calories":"70"}];
$('#food').autocomplete({
source: jsonVersion,
select: function (event, ui) {
selectedObj = ui.item;
alert("selected object=" + selectedObj.value);
},
minLength: 1
});
Any idea why this would work in the fiddle but not in the browser? I am not getting any browser errors. Simply nothing is being displayed when I type in the textbox.
EDIT
Perhaps it is in the way I am populating my jsonVersion - although when I print the jsonVersion via "alert", it looks right. Any advice on what I am doing wrong here would be appreciated. Here is the entire javascript file. "data" is an array of arrays and I am looping through each of those arrays to create an object, in turn creating an array of Objects. Then I convert the array of objects to json using stringify:
$(function ($) {
var jsonVersion;
var arrayOfObjects;
$.ajax({
type: "GET",
url: "test.js",
dataType: "text",
success: function(data) {
data = $.csv.toArrays(data);
arrayOfObjects = new Array();
for(var i=1; i<data.length; i++)//skipping over header
{
var foodObject = new Object();
foodObject.label = data[i][1];
foodObject.weight = data[i][2];
foodObject.servingSize = data[i][3];
foodObject.calories = data[i][4];
arrayOfObjects.push(foodObject);
}
jsonVersion = JSON.stringify(arrayOfObjects);
alert(jsonVersion);
}
});
$('#food').autocomplete({
source: jsonVersion,
select: function (event, ui) {
selectedObj = ui.item;
alert("selected object=" + selectedObj.value);
},
minLength: 1
});
})
You have two major problems:
You're passing a string to the source option of autocomplete. When you do this, the widget attempts to use that string as a URL to retrieve results from. Since this string is a JSON representation of the array you built as the result of the AJAX call, this is obviously not going to work the way you expect it to. You should simply use arrayOfObjects instead.
You're initializing the autocomplete widget outside of the success callback for your AJAX request. This means that the autocomplete widget is initialized with an empty source. You can fix by simply moving the initialization into the success callback.
Fixing both of these things should fix your issues:
$(function ($) {
$.ajax({
type: "GET",
url: "test.js",
dataType: "text",
success: function(data) {
data = $.csv.toArrays(data);
var arrayOfObjects = [];
for(var i=1; i<data.length; i++)//skipping over header
{
var foodObject = new Object();
foodObject.label = data[i][1];
foodObject.weight = data[i][2];
foodObject.servingSize = data[i][3];
foodObject.calories = data[i][4];
arrayOfObjects.push(foodObject);
}
$('#food').autocomplete({
source: arrayOfObjects,
select: function (event, ui) {
selectedObj = ui.item;
alert("selected object=" + selectedObj.value);
},
minLength: 1
});
}
});
});
Looks like your script is not inside dom ready handler.
In jsfiddle, in the second dropdown in the left side panel onload tells the app to add a wrapping onload handler for the script - if you select on head it will not work fiddle
jQuery(function ($) {
var jsonObject = [{
"label": "mac and cheese",
"servingSize": "1 cup",
"calories": "500"
}, {
"label": "slice of pizza",
"servingSize": "1 slice",
"calories": "400"
}, {
"label": "oreo cookie",
"servingSize": "1 cookie",
"calories": "100"
}, {
"label": "salad",
"servingSize": "1 cup",
"calories": "50"
}, {
"label": "apple",
"servingSize": "1 apple",
"calories": "70"
}];
$('#food').autocomplete({
source: jsonObject,
select: function (event, ui) {
selectedObj = ui.item;
alert("selected object=" + selectedObj.value);
},
minLength: 1
});
})
Demo: Fiddle
Update:
$(function ($) {
var arrayOfObjects = [];
$.ajax({
type: "GET",
url: "test.js",
dataType: "text",
success: function (data) {
data = $.csv.toArrays(data);
for (var i = 1; i < data.length; i++) //skipping over header
{
var foodObject = new Object();
foodObject.label = data[i][1];
foodObject.weight = data[i][2];
foodObject.servingSize = data[i][3];
foodObject.calories = data[i][4];
arrayOfObjects.push(foodObject);
}
}
});
$('#food').autocomplete({
source: arrayOfObjects,
select: function (event, ui) {
selectedObj = ui.item;
alert("selected object=" + selectedObj.value);
},
minLength: 1
});
})
Related
I have JSON-LD as shown, where ratingValue and ratingCount are coming from backend, but I want do it from UI through Ajax call and update it in the aggregateRating.
But when opened page source it is showing data coming from the backend, but when I do console.log() it is showing the value expected but it is not updated in page source.
Is there any way possibly do it from the UI side?
<script type="application/ld+json"> {
"#context": "http://schema.org/",
"#type": "Product",
"name": "Phone",
"aggregateRating": {
"#type": "AggregateRating",
"ratingValue": "4.5",
"ratingCount": "80"
},
"offers": {
"#type": "AggregateOffer",
"lowPrice": "5",
"highPrice": "10",
"priceCurrency": "USD",
"availability": "http://schema.org/InStock"
}
}
</script>
(function () {
var id = $ {
prdId
};
var response = "";
$.ajax({
url: url;
dataType: "jsonp",
data: {
pid: id,
_method: "GET",
t: new Date().getTime()
},
timeout: 20000,
xhrFields: {
withCredentials: true
},
type: "get",
success: function (json) {
if (json.success == true) {
response = json.data;
//call api
structureData(response);
} else {
response = "error";
}
}
});
function structureData(resp) {
var json = document.querySelector('script[type="application/ld+json"]').textContent;
json = JSON.parse(json);
json["aggregateRating"] = {
"#type": "AggregateRating",
"ratingValue": resp.averageScore,
"reviewCount": resp.averageScore
}
var jso = JSON.stringify(json);
document.querySelector('script[type="application/ld+json"]').textContent = jso;
}
}
You can definitely update JSON-LD dynamically, this is a more crude example - but you can run the code snippet and see it working. I found the code through this SO question about roughly the same topic but modified it to match your example better:
let jsonLdScript = document.querySelector('script[type="application/ld+json"]');
let jsonld = JSON.parse(jsonLdScript.innerText);
document.getElementById('orig-result').textContent = jsonLdScript.innerText;
jsonld.aggregateRating.ratingValue = "5";
jsonld.aggregateRating.ratingCount = "95";
let newJson = JSON.stringify(jsonld);
jsonLdScript.innerHTML = newJson;
document.getElementById('result').textContent = jsonLdScript.innerText;
<html>
<head>
<script type="application/ld+json">
{
"#context": "http://schema.org/",
"#type": "Product",
"name": "Phone",
"aggregateRating": {
"#type": "AggregateRating",
"ratingValue": "4.5",
"ratingCount": "80"
},
"offers": {
"#type": "AggregateOffer",
"lowPrice": "5",
"highPrice": "10",
"priceCurrency": "USD",
"availability": "http://schema.org/InStock"
}
}
</script>
</head>
<body>
<p>Original Output JSON-LD: <br /><strong id="orig-result"></strong></p>
<p>New Output JSON-LD: <br /><strong id="result"></strong></p>
</body>
</html>
How are you testing? A few things to keep in mind:
Obviously the raw page DOM won't be modified
You should see the changes in dev tools
If you're using Googles Structured Data Tool, and the original JSON is parsed before your function updates it, I'd wager Google won't catch the change.
If you're using querySelector, might want to confirm that the JSON-LD you intend to modify is the first instance of JSON-LD on the page.
A company email-generating application I'm working on has an autocomplete input to autofill email theme data into a form. The data is returned as a JSON object, but a couple of the object values extraps and extraul contain multidimensional arrays. I'm able to get the plain key:value data just fine out in the response, but I can't seem to figure out how to pull the arrays in so I can loop over them to update certain sections of the form.
Here's a look at some of the JSON code coming in:
0:
emaildate: "2019-01-10"
extraps: Array(2)
0: {extrap: "test paragraph", position: 1}
1: {extrap: "another paragraph", position: 3}
length: 2
__proto__: Array(0)
extraul: Array(4)
0: {ulid: 1, position: 2, li: "list item 1", liposition: 1}
1: {ulid: 1, position: 2, li: "list item 2", liposition: 2}
2: {ulid: 1, position: 2, li: "list item something new", liposition: 3}
3: {ulid: 1, position: 2, li: "A new list item", liposition: 4}
length: 4
__proto__: Array(0)
id: 44
label: "Some Kind of Email Theme - 2019-01-10"
lastupdated: "2019-01-06 02:00:04"
store: "Premier"
themedesc: "Here's a description of the theme."
themeimage: null
themeincludeextrap: 1
themeincludeul: 1
themelink: "some-kind-of-email-theme"
themelinkinclude: 1
themename: "Some Kind of Email Theme"
themenotes: "Some notes about it"
themesortorder: 0
value: "Some Kind of Email Theme"
__proto__: Object
length: 1
__proto__: Array(0)
And here's a look at the javascript to bring it in from autotheme.php:
//Autofill Theme Info based on text entry
$( "#themename" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "autotheme.php",
type: "GET",
dataType: "json",
data: {
q: request.term
},
success: function(data) {
console.log(data);
response($.map(data, function(item) {
return {
id: item.id,
value: item.value,
label: item.label,
themename: item.themename,
themenotes: item.themenotes,
themedesc: item.themedesc,
themeimage: item.themeimage,
themeincludeextrap: item.themeincludeextrap,
themeincludeul: item.themeincludeul,
themelinkinclude: item.themelinkinclude,
themelink: item.themelink,
themeextraps: item.extraps,
themeextraul: item.extraul
}
}))
},
error: function(errorThrown){
console.log(errorThrown);
console.log("There is an error with theme autocomplete.");
}
});
},
minLength: 2,
select: function(event, ui) {
if (ui.item) {
$this = $(this);
$('#themeid').val('');
$('#extratext').html('');
$('#themename').val(ui.item.themename);
$('#themenotes').val(ui.item.themenotes);
$('#themedesc').val(ui.item.themedesc);
var themeimage = ui.item.themeimage;
var themeincludeextrap = ui.item.themeincludeextrap;
var themeincludeul = ui.item.themeincludeul;
var themelinkinclude = ui.item.themelinkinclude;
var themeextraps = ui.item.extraps;
var themeextraul = ui.item.extraul;
if(themeextraps !== undefined) {
var extrapcount = themeextraps.length;
}
if(themeextraul !== undefined) {
var extraulcount = themeextraul.length;
}
if((themeextraps !== undefined) || (themeextraul !== undefined)) {
var extratextpositions = {};
$.each(themeextraps, function(i, themeextraps) {
extratextpositions[themeextraps.position] = 'p';
})
$.each(themeextraul, function(i, themeextraul) {
extratextpositions[themeextraul.position] = 'ul';
})
$.each(extratextpositions, function(key, value) {
if(extratextpositions[key] == 'p') {
addExtraP.call(this);
} else {
addExtraUl.call(this);
}
});
$('#themelink').val(ui.item.themelink);
if(themelinkinclude == 1) {
$('#themelinkinclude').prop("checked", true);
} else {
$('#themelinkinclude').prop("checked", false);
}
event.preventDefault();
}
},
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
},
complete: function(){
$("#themename").removeClass("ui-autocomplete-loading");
}
}
});
I'm able to get the simple key:value values just fine, but I get undefined for the arrays. I'm sure there's a different way I need to pull those in, but I don't know how and can't seem to find the answer in other threads on here. Any help would be greatly appreciated!
Figured out a way to get around this problem, thanks to some help from #Bibberty. I'm not sure if this is the most graceful or easy way to solve it, but it worked for me. I created an array from the JSON data values, then created variables from the arrays within the data array and added them to the response return value. Here's the new functional code (or, at least, the part that matters):
//Autofill Theme Info based on text entry
$( "#themename" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "autotheme.php",
type: "GET",
dataType: "json",
data: {
q: request.term
},
success: function(data) {
const results = data.map(function (value, label) {
return [value];
})
var extraps = results[0][0]['extraps'];
var extraul = results[0][0]['extraul'];
response($.map(data, function(item) {
return {
id: item.id,
value: item.value,
label: item.label,
themename: item.themename,
themenotes: item.themenotes,
themedesc: item.themedesc,
themeimage: item.themeimage,
themeincludeextrap: item.themeincludeextrap,
themeincludeul: item.themeincludeul,
themelinkinclude: item.themelinkinclude,
themelink: item.themelink,
extraps: extraps,
extraul: extraul
}
}))
$("#themename").removeClass("ui-autocomplete-loading");
},
error: function(errorThrown){
console.log(errorThrown);
console.log("There is an error with theme autocomplete.");
}
});
},
minLength: 2,
select: function(event, ui) {
if (ui.item) {
$this = $(this);
console.log(ui.item.extraps);
$('#themeid').val('');
$('#extratext').html('');
$('#themename').val(ui.item.themename);
$('#themenotes').val(ui.item.themenotes);
$('#themedesc').val(ui.item.themedesc);
var themeimage = ui.item.themeimage;
var themeincludeextrap = ui.item.themeincludeextrap;
var themeincludeul = ui.item.themeincludeul;
var themelinkinclude = ui.item.themelinkinclude;
var themeextraps = ui.item.extraps;
var themeextraul = ui.item.extraul;
if(themeextraps !== undefined) {
var extrapcount = themeextraps.length;
}
if(themeextraul !== undefined) {
var extraulcount = themeextraul.length;
}
...
I have a jQuery script that will get a JSON response and create as many "player" objects as there are in the response.
It will then add to availablePlayers which I then use as the variable for the source: field of autocomplete
When a user selects a player name and clicks the "add" button it will, at the moment, just display the guid and name of a player.
However, no matter what letters I type, all the players are given as an option. To illustrate this, if I type "Z" and none of the players have Z in their name, they options are still displayed.
How can I refine this functionality?
HTML
<div class="player-widget">
<label for "players">Players</label>
<input id="player" />
<input id="playerGUID" hidden />
<button id="add">Add</button>
</div>
jQuery
$(document).ready(function(){
var availablePlayers = []; // BLANK ARRAY OF PLAYERS
$("#player").autocomplete({
source: availablePlayers,
response: function (event, ui) {
ui.content = $.map(ui.content, function(value, key) {
return {
label: value.name,
value: value.guid
}
});
},
focus: function(event, ui) {
$("#player").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("#player").val(ui.item.label); // display the selected text
$("#playerGUID").val(ui.item.value); // save selected id to hidden input
return false;
}
});
$.getJSON("http://localhost/Websites/Player-Widgets/service.php", function(data) {
var feedHTML = '';
// LOOP THROUGH EACH PLAYER
$.each(data.players, function(i, player) {
// DEFINE VARIABLES - BASED ON PLAYER ATTRIBUTES
var guid = player.guid;
var name = player.name;
var dob = player.date_of_birth;
var birth = player.birthplace;
var height = player.height;
var weight = player.weight;
var position = player.position;
var honours = player.honours;
// CREATE NEW PLAYER (OBJECT)
var player = {
guid: guid,
name: name,
position: position
};
// ADD TO PLAYER TAG ARRAY
availablePlayers.push(player);
});
console.log("User friendly array");
$.each(availablePlayers, function(i, val) {
console.log(val.guid + " - " + val.name + " [" + val.position + "]");
});
console.log("Array printout");
console.log(JSON.stringify(availablePlayers));
}).done(function(){
console.log("Done! Success!");
$("#player").autocomplete("option", "source", availablePlayers);
});
$("#add").click(function() {
alert($("#playerGUID").val() + " - " + $("#player").val());
});
});
Sample JSON response
{
"players": [
{
"guid": "1",
"name": "Matias Aguero",
"date_of_birth": "1981-02-13",
"birthplace": "San Nicolas, Argentina",
"height": "1.83m (6' 0\")",
"weight": "109kg (17st 2lb)",
"position": "Prop",
"honours": "40 caps"
},
{
"guid": "2",
"name": "George Catchpole",
"date_of_birth": "1994-02-22",
"birthplace": "Norwich, England",
"height": "1.85em (6ft 1\")",
"weight": "104kg (16st 5lb)",
"position": "Centre",
"honours": ""
}
]
}
Your problem is in the source function.
Source function uses request to pass term param to query, and you are ignoring it.
If you're using availablePlayers to query, you should use
source: availablePlayers
and your current function to map {label, text} object in response parameter.
response: function (event, ui) {
ui.content = $.map(ui.content, function(value, key) {
return {
label: value.name,
value: value.guid
}
});
}
My Angular autocomplete is using an object array and returning the correct result list. I can access the variables and map them to name and id field, but once I do this my drop down selector won't display text.
Here is the fiddle I started with and works correctly: http://fiddle.jshell.net/59nq55rf/
Here is the fiddle using the array and fails to display text in the drop down:
http://fiddle.jshell.net/ua1r8kjv/
$(function () {
var categoryList = [
{ "CategoryName": "Groceries", "CategoryID": "1" },
{ "CategoryName": "Games", "CategoryID": "2" },
{ "CategoryName": "Gadgets", "CategoryID": "3" },
]
$("#Category").autocomplete({
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
var matching = $.grep(categoryList, function (value) {
var name = value.CategoryName;
var id = value.CategoryID;
return matcher.test(name) || matcher.test(id);
});
response(matching);
}
});
});
HTML
<div class="ui-widget">
<form>
<label for="txtEmployeeName">Developer:</label>
<input id="Category" />
</form>
</div>
It definitively has to do with the jQuery UI library. It seems that it is expecting the property names to be exactly "value" and "id", anything else will not work. Run the code snippet below and test it with the letter 'g' to see for yourself. The result will correctly show 3 but fail to display the ones with the incorrect property names.
$(function () {
var categoryList = [
{ "value": "Groceries", "id": "1" },
{ "categoryname": "Games", "categoryid": "2" },
{ "doIwork": "Gadgets", "doIworkId": "3" },
]
$("#Category").autocomplete({
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
var matching = $.grep(categoryList, function (value) {
var name = value.categoryname || value.doIwork || value.value;
var id = value.categoryid || value.doIworkId || value.id;
return matcher.test(name) || matcher.test(id);
});
response(matching);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="ui-widget">
<form>
<label for="txtEmployeeName">Developer:</label>
<input id="Category" />
</form>
</div>
This is my custom solution for the answer posed above by #Urielzen
_CustomPair[] pairList = new _CustomPair[length];
private class _CustomPair
{
public string value;
public string id;
public _CustomPair(string curval, string curid)
{
value = curval;
id = curid;
}
}
I am trying to reformat a dynamically created JSON output into a format that can be consumed by the x-editable select type source[]. I need help building the array so that the re-formated JSON output looks like this:
{value: 2, name: 'Maintenance'},
Below is a sample original JSON which I am consuming:
{"COLUMNS":["SECTIONCOMMONNAME"],"DATA":[["Aircraft Overview"],["Email Server Settings"],["Maintenance"],["Page Sections"],["WOW"]]}
The code I am using is:
$(document).ready(function () {
var myURL = 'https://api.myjson.com/bins/3nzdj';
var myarray = [];
$.ajax({
url: myURL,
dataType: 'json',
success: function (e) {
console.log('My created console output:' +'<br>');
$.each(e.DATA, function (i, jsonDataElem) {
console.log("{value: " + i + ', ' + "name: " + '"'+this+"'}");
var item = {
"value": i,
"name": this
};
myarray.push(item);
});
var newJson = JSON.stringify(myarray);
console.log('My stringify output:' +'<br>' +newJson);
}
});
$('.sectionsAvailable').editable({
name: 'template',
type: 'select',
placement: 'right',
send: 'always',
value: 1,
source: [], //newJson (my new var)
/* should be in this format:
source: [{
value: 1,
text: 'text1'
}, {
value: 2,
text: 'text2'
}]*/
});
};
});
After the stringify, the output is close, but wont work. It looks like this:
{"value":2,"name":["Maintenance"]}
and needs to look like thisL
{value:2,name:'Maintenance'},
Here is a JSfiddle showing the output here.
it seems you are assigning complete array instead of value at index 0 try this
var item = {
"value": i,
"name": this[0] // gives elemnt at index 0
};
myarray.push(item);
FIDDLE
I was able to answer my own question. There might be a better way, but this works:
var myURL = 'https://api.myjson.com/bins/3nzdj';
$.getJSON(myURL, function(data) {
var output = '';
$.each(data.DATA, function(key, val) {
output +='{value: ';
output += "'"+key+"'";
output +=',text:';
output += "'"+val+"'";
output +='}';
output +=',';
});
var outputAdapted = '['+output+']'
$('.sectionsAvailable').editable({
name: 'template',
type: 'select',
placement: 'right',
send: 'always',
value: 1,
// should be in this format:
source:
function() {
return outputAdapted;
},
});
});
My FIDDLE I hope this can help someone else.