I have a page with a search bar that has auto complete according to the data in a separate js file. If I type in a letter it throws out the related names that starts with or contains that letter, if I select the result if displays the details that come with that name. I just need to know how to link an an image to that data so when selected a picture is displayed with that info of the name.
Here is my Javascript code:
$(function(){
var currencies = [
{ value: 'Murray Smith', data: 'AFN', foto: src='img/logo.jpg' },
{ value: 'Brown Church', data: 'ALL' ,foto: src='../img/logo.jpg'},
{ value: 'Jack Jones', data: 'DZD' ,foto: src='../img/logo.jpg'},
{ value: 'Ben Clark', data: 'EUR' ,foto: src='../img/logo.jpg'},
{ value: 'Pete White', data: 'AOA' ,foto: src='../img/logo.jpg'},
{ value: 'East Caribbean dollar', data: 'XCD' ,foto: src='../img/logo.jpg'},
];
// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol: </strong> ' + suggestion.data + '<br> <strong>Profile Pic:</strong> ' + suggestion.foto;
$('#outputcontent').html(thehtml);
}
});
});
Thank you in advance.
Use this code:
var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value
+ ' <br> <strong>Symbol: </strong> ' + suggestion.data
+ '<br> <strong>Profile Pic:</strong> <img ' + suggestion.foto +' />';
^^^ use image tag here
And your foto should be like this:
foto: "src='img/logo.jpg'"
^^^ add the double quotation mark to make it correct
Updated your array to be valid will help :)
var currencies = [
{ value: 'Murray Smith', data: 'AFN', foto: '<img src="img/logo.jpg">' },
{ value: 'Brown Church', data: 'ALL' ,foto: '<img src="img/logo.jpg">'},
{ value: 'Jack Jones', data: 'DZD' ,foto: '<img src="img/logo.jpg">'},
{ value: 'Ben Clark', data: 'EUR' ,foto: '<img src="img/logo.jpg">'},
{ value: 'Pete White', data: 'AOA' ,foto: '<img src="img/logo.jpg">'},
{ value: 'East Caribbean dollar', data: 'XCD' ,foto: '<img src="img/logo.jpg">'},
];
As André Dion mentioned in his comment, your syntax is invalid.
you should change the foto property value of your object to be:
foto: 'path/to/my/img.ext'
and in your HTML, when calling that property, append it inside an image tag.
thehtml += '<img src="'+foto+'" alt="don't forget the blind!" />';
Hope this helps.
‐ Sid
Related
So I'm mapping through an array of objects, but it displays everything within one line.
I want to display this as if it's 2 separate cards.
let data = [
{
name: 'Person 1',
age: '30'
},
{
name: 'Person 2',
age: '30'
},
];
const info = document.querySelector('#info');
let details = data.map(function(item) {
return ' ' + item.name + ' ' + 'is ' + item.age;
});
info.innerHTML = details;
I only have one p tag, so it just displays the name and age all within that one p tag.
<p id="info"></p>
So it just looks like this
Person 1 is 30, Person 2 is 30.
What I'd like it to do is be wrapped in a custom div and essentially be a stand alone card.
So like this
What you could do is create two separate divs or paragraphs (whatever you need), each holding one persons information. Then you could create an array that holds the objects within. Something like this
let data = [
{
name: 'Person 1',
age: '30'
},
{
name: 'Person 2',
age: '30'
},
];
const info = document.querySelector('#info');
const infoTwo = document.querySelector('#info2');
info.innerHTML = data[0].name + ' ' + 'is ' + data[0].age;
infoTwo.innerHTML = data[1].name + ' ' + 'is ' + data[1].age;
<p id = "info"></p>
<p id = "info2"></p>
It'd be more like this. You could just add them to div's... that's very close to how ReactJS does it by using JSX, but by using plain JS, it is:
let data = [{
name: 'Person 1',
age: '30'
},
{
name: 'Person 2',
age: '28'
},
];
const info = document.querySelector('#info');
let details = data.map(function(item) {
return '<div>' + item.name + ' ' + 'is ' + item.age + "</div>";
});
info.innerHTML = details.join("\n");
#info div {
border: 1px dotted #07f;
margin: 0.3em;
padding: 1.2em;
border-radius: 0.6em;
}
<div id="info"></div>
ES6 syntax
Now, it can be made a little cleanly if you use the ES6 syntax, like the following:
let data = [{
name: 'Person 1',
age: '30'
},
{
name: 'Person 2',
age: '28'
},
];
const info = document.querySelector('#info');
let details = data.map(item => `<div>${item.name} is ${item.age}</div>`);
info.innerHTML = details.join("\n");
#info div {
border: 1px dotted #07f;
margin: 0.3em;
padding: 1.2em;
border-radius: 0.6em;
}
<div id="info"></div>
I write this code but its not working
function tooltipHtml(n, d) {
return "<b>" + n + "</b><table>" +
"<hr style='margin-top: 5px;margin-bottom: 5px;'/>" +
"<tr ng-repeat=\"Tooltip in d.Tooltip\">" +
"<td style='min-width:200px;'><div data-ng-bind=\"Tooltip.Name\"></div> = <div data-ng-bind=\"Tooltip.Value\"></div></td>" +
"</tr>" +
"</table>";
}
where
d.Tooltip =
[{
Name: "MGRert APropertsdfy Management",
Value: 162
},
{
Name: "MGRss SManagement",
Value: 1621
},
{
Name: "Novssa CASFS",
Value: 1612
}
]
is this possible to create html in js file.
Ive followed this example from another SO thread:
X-editable custom field type not respecting overridden defaults
and its helped me to create a similar custom field with x-editable. All is working ok but i cant figure out how render/display the 'text' of the select - the SO example ouputs the 'value'. my js to initialis the x-editable to use my custom inputs is thus:
$('#stffulladdress').editable({
url : '',
pk : 6,
value : {
address : "",
city : "",
region : "",
postcode : "",
country : "eng"
},
sourceCountry: [
{ value: "eng", text: "ENGLAND" },
{ value: "ire", text: "IRELAND" },
{ value: "sco", text: "SCOTLAND" },
{ value: "cym", text: "WALES" }
],
validate : function(value) {
if (value.address == '' || value.postcode == '') return "Address first lines AND Postcode required";
},
display : function(value) {
if (!value) {
$(this).empty();
return;
}
console.log(value.country);
var html = $('<div>').html( value.address + '<br />' + value.city + '<br />' + value.region + '<br />' + value.postcode + '<br />' + value.country );
$(this).html(html);
}
});
My custom x-editable class is the same as the SO example mentioned with the only difference being i have more inputs -they work ok as expected. I would have thought that this snippet from the x-edit class gets the text of the selected item:
value2html: function(value, element) {
if(!value) {
$(element).empty();
return;
}
var countryText = value.country;
$.each(this.sourceCountryData, function (i, v) {
if (v.value == countryText) {
countryText = v.text.toUpperCase();
}
});
var html = $('<div>').html( value.address + ',<br />' + value.city + ',<br />' + value.region + ',<br />' + value.postcode + ',<br />' + countryText );
$(element).html(html);
},
But upn displaying the selected country i still get the country value "eng" and not the text "England".
I've tried :
value.country which gives me the value 'eng'
and value.text gives undefined
Any idea how i can get the selected text??
thanks
Try the sourceCountry as follow:
sourceCountry: [
{ "eng": "ENGLAND" },
{ "ire": "IRELAND" },
{ "sco": "SCOTLAND" },
{ "cym": "WALES" }
],
I need to display related products in javascript on eBay listing.
I have that idea: I keep in array info about other listings like: url, image, price and tags attached to this product.
example:
some_product = [
tags: 'home, garden, kitchen',
url: http://listing.url,
price: 100
],
some_product_2 = [
tags: 'home, lifestyle, books',
url: http://listing2.url,
price: 120
]
and on listing I put code like:
<script type="text/javascript" src="http://domain.com/related_prod.js?keyword=home"></script>
And I expect that showed all the products with "home" in "tags". Can someone direct me to a solution?
First off, this is not a valid JavaScript or JSON:
some_product = [
tags: 'home, garden, kitchen',
url: http://listing.url,
price: 100
],
some_product_2 = [
tags: 'home, lifestyle, books',
url: http://listing2.url,
price: 120
]
The above should be replaced with the { } for objects.
{
some_product: {
tags: 'home, garden, kitchen',
url: http://listing.url,
price: 100
},
some_product_2: {
tags: 'home, lifestyle, books',
url: http://listing2.url,
price: 120
}
}
The above is a JavaScript object now. But this has been made better. Now, this being a pure JSON, it has to be added to a JavaScript variable. Consider this:
var products = {
some_product: {
tags: 'home, garden, kitchen',
url: http://listing.url,
price: 100
},
some_product_2: {
tags: 'home, lifestyle, books',
url: http://listing2.url,
price: 120
}
}
Now using the products, you can loop and put it as a list item.
var products = {
some_product: {
tags: 'home, garden, kitchen',
url: 'http://listing.url',
price: 100
},
some_product_2: {
tags: 'home, lifestyle, books',
url: 'http://listing2.url',
price: 120
}
}
var finalHtml = "";
for (var item in products) {
finalHtml += '<li><a href="' + products[item].url + '">' + item + '<\/a> <br \/>Tags: ' + products[item].tags + '<br \/>Price: ' + products[item].price + ' $</li>';
}
document.getElementById("products").innerHTML = finalHtml;
<ul id="products"></ul>
See the snippet above.
Considering that's not valid JavaScript, we can restructure your code to something more usable for your scenario... Like this:
var products = [
{
name: 'some_product',
tags: ['home', 'garden', 'kitchen'],
url: 'http://example.com/1',
price: 100,
},
{
name: 'some_product_2',
tags: ['home', 'lifestyle', 'books'],
url: 'http://example.com/2',
price: 120,
}
];
From here, we can use Array.prototype.filter to fetch the results based on tags:
function category(tag) {
return products.filter(function(product){
if (~product.tags.indexOf(tag)) return product;
});
}
category('home');
// ...
Example
both Praveen Kumar and Jamen proved to be helpful. I joined their answers to create one code.
var products = [
{
name: 'some_product',
tags: ['home', 'garden', 'kitchen'],
url: 'http://example.com/1',
price: 100,
},
{
name: 'some_product_2',
tags: ['home', 'lifestyle', 'books'],
url: 'http://example.com/2',
price: 120,
},
{
name: 'some_product_3',
tags: ['garden', 'lifestyle', 'books'],
url: 'http://example.com/2',
price: 120,
}
];
var finalHtml = "";
function category(tag) {
return products.filter(function(product){
if (~product.tags.indexOf(tag)) {
finalHtml += '<li><a href="' + product.url + '">' + product.name + '<\/a><br \/>Price: ' + product.price + ' $</li>';
document.getElementById("products").innerHTML = finalHtml;
console.log(product.name);
}
});
}
category('home');
//category('garden');
<ul id="products"></ul>
https://jsfiddle.net/p5x2v2cb/
Thank you for answers.
I've been working on an restaurant app that should get the menu from an online database.
This is how I currently and "Manually" populate the menu:
Controller.html
$scope.menu = [{
name: 'Espresso',
price: 27,
qty: 1,
desc: "One shot of espresso prepared with 7 grams of ground coffee in a single portafilter. The shot should be 1 ounce of liquid. You have two choices with espresso: ristretto, a very short or “restrained” shot, brewed at less than 2/3 of a demitasse, or luongo, a long pull of espresso brewed so the liquid should be more than 2/3 of a demitasse.",
img: "img/espresso.png",
active: false,
sizes: [{name: "Small", price: 0, active:false},
{name: "Medium", price: 5, active:false},
{name: "Large", price: 10, active:false}],
flavors: [{name: 'Vanilla', price: 8, active: false},
{name: 'Almond', price: 8, active: false},
{name: 'Hazelnut', price: 8, active: false},
{name: 'Caramel', price: 8, active: false}]
}];
However I can't seem to achieve populating this using Parse, how would I approach this using a query as the following (Which is a working query).
Index.html
<script type="text/javascript">
Parse.initialize("vGoJDvwwfZBiUFcwfkee7M5vCqL7lLxCgKIFJXDc", "6VRlos6qppaek1uDPPLqpHtmB3fHefOJMqYJNxj9");
var DrinkMenu = Parse.Object.extend("DrinkMenu");
var query = new Parse.Query(DrinkMenu);
query.find({
success: function(results) {
alert("Successfully retrieved " + results.length + " items.");
// Do something with the returned Parse.Object values
for (var i = 0; i < results.length; i++) {
var object = results[i];
alert(object.id + ' - ' + object.get('name'));
}
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
</script>
You can notice I can get the variables needed for each item, in this case the name of the first result, which I display in an alert.
Any help is appreciated!
After Parse.initialize, create a variable, like this:
var arrMenu = [];
then change the line alert(object.id + ' - ' + object.get('name')); to
arrMenu.push({
name: object.get('name'),
price: object.get('price'),
qty: object.get('qty'),
desc: object.get('desc'),
img: object.get('img'),
active: object.get('active'),
sizes: object.get('sizes'),
flavors: object.get('flavor')
});
I am supposing that you are storing the info in the Parse Collection with the structure you mentioned. If it is different, let me know.
And, after the brack the closes the for, you add:
$scope.menu = arrMenu;
I hope it helps!