Response title
This is preview!
Move this topic
Single quote array for typeahead
in Using jQuery
•
4 years ago
item.php
// Get Catalog
$item = new Item($pdo);
$item_list = $item->get_items();
echo json_encode($item_list);
$item = new Item($pdo);
$item_list = $item->get_items();
echo json_encode($item_list);
typeahead-data.js
var items = ['Item One', 'Item Two', 'Item Million'];
How do I use the data from jQuery to populate the items instead of hard coding?
$.getJSON('item.php', function (items) {
var typeahead_items = ????;
});
1
Replies(25)
Re: Single quote array for typeahead
4 years ago
What kind of typeahead code are you using? Or haven’t you got that far yet?
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Single quote array for typeahead
4 years ago
I have it fully working as it was one implemented in a bootstrap theme. Do you want to see the whole code?
The relevant part is the array in typeahead-data.js has the hard-coded array items but I want to get it from the database.
Here is the code:
- /*Basic*/
- var substringMatcher = function(strs) {
- return function findMatches(q, cb) {
- var matches, substringRegex;
- // an array that will be populated with substring matches
- matches = [];
- // regex used to determine if a string contains the substring `q`
- var substrRegex = new RegExp(q, 'i');
- // iterate through the pool of strings and for any string that
- // contains the substring `q`, add it to the `matches` array
- $.each(strs, function(i, str) {
- if (substrRegex.test(str)) {
- matches.push(str);
- }
- });
- cb(matches);
- };
- };
- var items = ['Item One', 'Item Two', 'Item Three', 'Item Million'];
- $('#the-basics .typeahead').typeahead({
- hint: true,
- highlight: true,
- minLength: 1
- },
- {
- name: 'items',
- source: substringMatcher(items)
- });
Leave a comment on ngibbs's reply
Re: Single quote array for typeahead
4 years ago
replace lines 19-28 with
- $.getJSON('item.php', function (items) {
- $('#the-basics .typeahead').typeahead({
- hint: true,
- highlight: true,
- minLength: 1
- },
- {
- name: 'items',
- source: substringMatcher(items)
- });
- })
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Single quote array for typeahead
4 years ago
JSON uses double quotes, not single quotes. $.getJSON() will fail if your data has single-quotes!
Do you want to change your data (in your static file or PHP code) to double-quotes (best), or use $.get() to get it as raw text, change the quotes with Javascript code, and then parse the JSON?
Do you have a static file with the data, or is it generated by PHP? I am confused, since first you mention a static file, typeahead-data.js, but then you show code loading from item.php.
If you are creating the JSON with PHP code, using json_encode(). It will create valid JSON, with double-quotes.
Re: Re: Single quote array for typeahead
4 years ago
- echo json_encode($item_list);
uses double quotes.
JΛ̊KE
Leave a comment on watusiware's reply
Re: Single quote array for typeahead
4 years ago
This is why I asked about single quote array in the topic.
I do not know what would be required to change the array to double quotes to be supported by the typeahead packaged in the template so I was asking if there was a way to generate the var items array using the json output but with single quotes.
I am willing to go with any suggestion that you see fitting. But I will need help getting there.Do you want to change your data (in your static file or PHP code) to double-quotes (best), or use $.get() to get it as raw text, change the quotes with Javascript code, and then parse the JSON?
Can I use something like this:
var endString = startString.replace(/"/g, "'");
Leave a comment on ngibbs's reply
Re: Single quote array for typeahead
4 years ago
$item = new Item($pdo);
$item_list = $item->get_items();
echo json_encode($item_list);
$item_list = $item->get_items();
echo json_encode($item_list);
sends double quotes.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Single quote array for typeahead
4 years ago
Are you able to change the PHP code? If so, change the PHP code to something similar to what Jake posted above.
How did you wind-up with single quotes in your "JSON"? Did you write some kludgy PHP code to paste together some key strings and data strings and put single-quotes around the strings? Don't do that! Use json_encode()!
Leave a comment on watusiware's reply
Re: Single quote array for typeahead
4 years ago
Okay I am not explaining myself properly. Let me start from the beginning.
The output to the json encode is standard with double quotes.
The bootstrap template I am using in the typeahead data file uses a hard-coded array of items that I posted the structure of. The hard-coded array uses single quotes.
I would like to use jquery to populate the array in the typeahead js file.
- var items = ['Item One', 'Item Two', 'Item Million'];
That is pretty much it.
Leave a comment on ngibbs's reply
Re: Single quote array for typeahead
4 years ago
You cannot use jQuery to populate the array in the typeahead.js file. It's on your server, and jQuery has no ability to write to it.
Forget the typeahead file! You don't need a typeahead file. You need a variable that holds a Javascript object. The typeahead file (and your var items = code) creates such a variable declaratively.
Jake's first example will work. The variable with the items is passed-in to the callback function by $.getJSON().
Did you try Jake's code?
- $.getJSON('item.php', function (items) {
Inside the callback function, items holds a Javascript object with your items. Exactly the same as your variable items that you hard-coded, but it was read from the JSON it got from your server.
Leave a comment on watusiware's reply
Re: Single quote array for typeahead
4 years ago
"foo" is identical to 'foo'. Both are identical to `foo`. It makes no difference how you get there it’s the same string contents.
JSON has a rule that only double quotes are used for the encoding.
Use my code.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Single quote array for typeahead
4 years ago
It did not work. This is my json encode:
[{"item_desc":"Apple Ambrosa - 12 x 2 lbs"},{"item_desc":"Apple Empire - 18 x 2 lbs"},{"item_desc":"Apple Fuji - 12x3 lbs"},{"item_desc":"Apple Fuji - 80\/88\/113 ct"},{"item_desc":"Apple Gala - 113 ct HP"}]
Re: Re: Single quote array for typeahead
4 years ago
You decided to switch from an array of strings to an array of objects. That’s the problem.
Your PHP has to return the same kind of array.
["Apple Ambrosa - 12 x 2 lbs","Apple Empire - 18 x 2 lbs", "Apple Fuji - 12x3 lbs" … ]
JΛ̊KE
Leave a comment on ngibbs's reply
Re: Single quote array for typeahead
4 years ago
Something like…
- $item = new Item($pdo);
- $item_list = $item->get_items();
- $a = array();
- foreach($item_list as $item){
- $a[]=$item->item_desc;
- }
- echo json_encode($a);
PHP is not one of my primary languages. But I think it should work.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Single quote array for typeahead
4 years ago
I did not get it to work. It gives me the following array:
[null,null,null…]
I am trying to understand arrays but I guess I am failing miserably. Why won't this work (it does not)
item.php (output)
[{"item_desc":"Avocadoes"},{"item_desc":"Broccoli"},{"item_desc":"Grapefruit"}]
typeahead-data.js
// Code I am trying to replace
var items = ['Avocadoes', 'Broccoli', 'Grapefruit'];
// Code that is not working
$.getJSON("item.php", function (data) {
var items = []; // THE ARRAY TO STORE JSON ITEMS.
$.each(data, function (index, value) {
items.push(value.item_desc); // PUSH THE VALUES INSIDE THE ARRAY.
console.debug(value.item_desc); // Debug
});
});
var items = []; // THE ARRAY TO STORE JSON ITEMS.
$.each(data, function (index, value) {
items.push(value.item_desc); // PUSH THE VALUES INSIDE THE ARRAY.
console.debug(value.item_desc); // Debug
});
});
In the console output I see all the items but I do get an error message after the last item:
Unable to get property 'length' of undefined or null reference
Re: Re: Single quote array for typeahead
4 years ago
You don’t need that bit of code when the PHP returns a simple array of strings.
JΛ̊KE
Leave a comment on ngibbs's reply
Re: Single quote array for typeahead
4 years ago
The patches to your PHP that I posted yesterday, give you
["Apple Ambrosa - 12 x 2 lbs","Apple Empire - 18 x 2 lbs", "Apple Fuji - 12x3 lbs" … ]
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Single quote array for typeahead
4 years ago
item.php
$item = new Item($pdo);
$item_list = $item->typeahead_items();
echo json_encode($item_list);
$item_list = $item->typeahead_items();
echo json_encode($item_list);
output
[{"item_desc":"Apple Ambrosa - 12 x 2 lbs"},{"item_desc":"Apple Empire - 18 x 2 lbs"},{"item_desc":"Apple Fuji - 12x3 lbs"}]
revised item.php
$item = new Item($pdo);
$item_list = $item->typeahead_items();
$a = array();
foreach($item_list as $item){
$a[]=$item->item_desc;
}
$item_list = $item->typeahead_items();
$a = array();
foreach($item_list as $item){
$a[]=$item->item_desc;
}
echo json_encode($a);
output
[null,null,null]
Re: Re: Single quote array for typeahead
4 years ago
Find a php forum. You no longer have a jQuery problem.
JΛ̊KE
Leave a comment on ngibbs's reply
Leave a comment on ngibbs's reply
Re: Single quote array for typeahead
4 years ago
Update:
I got the code to work. I could not understand why pushing items to the array would not work but I guess I had to put the typeahead code inside the ajax. I was putting it after.
- $.getJSON("item.php", function(data) {
- var items = []; // empty array
- $.each( data, function(index, value) {
- items.push(value.item_desc);
- console.log(value.item_desc);
- console.log(items.length);
- });
- $('#the-basics .typeahead').typeahead({
- hint: true,
- highlight: true,
- minLength: 1
- },
- {
- name: 'items',
- source: substringMatcher(items)
- });
- });
This code is acceptable?
Leave a comment on ngibbs's reply
Re: Single quote array for typeahead
4 years ago
$.each is cute, but using map is more succinct.
If it works, it’s good enough!
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Single quote array for typeahead
4 years ago
How do I use map?
$.getJSON("item.php", function(data) {
items.map(?);
});
What function would I use?
Leave a comment on ngibbs's reply
Re: Single quote array for typeahead
4 years ago
- var items = data.map(function(item) {
- return item.item_desc
- })
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to ngibbs's question
{"z656032902":[14737000007809188,14737000007809195,14737000007809213,14737000007809215,14737000007809253,14737000007808065,14737000007808067,14737000007808069,14737000007814011,14737000007816019],"z7664639":[14737000007808057,14737000007808059,14737000007808061],"z2950240":[14737000007805265,14737000007805273,14737000007805275,14737000007805283,14737000007805287,14737000007805299,14737000007805301,14737000007805329,14737000007805331,14737000007805353,14737000007813017,14737000007813027,14737000007813029]}
Statistics
- 25 Replies
- 4143 Views
- 1 Followers