How do I add an image to an javascript array?

Question

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.

Why don't use src: '../image/logo.jpg'? I am sure that would work :) — Afzaal Ahmad Zeeshan
– Afzaal Ahmad Zeeshan, Commented Oct 17, 2013 at 13:27
You can start by writing valid JavaScript. foto: src='img/logo.jpg' contains syntax errors. — André Dion
– André Dion, Commented Oct 17, 2013 at 13:27

Code Lღver · Accepted Answer · 2013-10-17 13:35:55Z

2

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

edited Oct 17, 2013 at 13:35

answered Oct 17, 2013 at 13:30

Code Lღver

15.6k16 gold badges61 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jamie Hutber Over a year ago

I like yours more :), but... mine will still work :p

Code Lღver Over a year ago

@JamieHutber yah you are also right. and your code will also work. but in your code there is redundancy of code as img tag is used multiple times. but approach is correct.

Jamie Hutber Over a year ago

exactly, lets just assume he wants separate things in each img, for example an alt tag.... (he could just add another variable, yeah yeah)

Jamie Hutber · Accepted Answer · 2013-10-17 13:30:46Z

0

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">'},
 ];

answered Oct 17, 2013 at 13:30

Jamie Hutber

28.2k54 gold badges194 silver badges314 bronze badges

1 Comment

arvidkahl Over a year ago

Referencing the url instead of using html inside of the currencies array would improve reusability and reduce repetition. value: 'Murray Smith', data: 'AFN', foto: 'img/logo.jpg' should be sufficient.

SidOfc · Accepted Answer · 2013-10-17 13:33:06Z

0

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

answered Oct 17, 2013 at 13:33

SidOfc

4,6143 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

How do I add an image to an javascript array?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related