read from an external .js file to tell javascript which image to display

Question

I have some images, located in a folder called 'img'. I have a list, written in .js format; I attach a simplified version of it here.

mylist = [
 {
  "color": "red",
  "item": "R1-1",
  "image": "R1-1.png"
 },
 {
  "color": "red",
  "item": "R1-2",
  "image": "R1-2.png"
 },
 {
  "color": "red",
  "item": "R1-3",
  "image": "R1-3.png"
  },
  {
   "color": "red",
   "item": "R1-4",
   "image": "R1-4.png"
},
]

I want my javascript to read the .js file, and know which image to display.

var test_stimuli = [
    {stimulus: "<div><img src='img/'+mylist[0]["image"]></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/'+mylist[1]["image"]></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/'+mylist[2]["image"]></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/'+mylist[3]["image"]></img></div><div><img src='img/scale.png'></img></div>"},
];

but this doesn't work. My guess is that I wrote the javascript wrong, perhaps messed up with the quotation marks, because the following works:

var test_stimuli = [
    {stimulus: "<div><img src='img/R1-1.png'></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/R1-2.png'></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/R1-3.png'></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/R1-4.png'></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/R1-5.png'></img></div><div><img src='img/scale.png'></img></div>"},
];

I want the display to look like something like this: enter image description here

Ethan Ryan · Answer 1 · 2018-09-25T18:09:27.580

The problem is with your string concatenation, here:

{stimulus: "<div><img src='img/'+mylist[0]["image"]></img></div><div><img src='img/scale.png'></img></div>"},

A new string in JavaScript can be built with double quotes, single quotes, or backticks:

For example:

var name = "Bob"

var string1 = "Hello, " + name
console.log(string1)

var string2 = 'Hello, ' + name
console.log(string2)

var string3 = `Hello, ${name}`
console.log(string3)

Those three strings will all return the same sentence.

This should work:

var mylist = [
 {
  "color": "red",
  "item": "R1-1",
  "image": "R1-1.png"
 }
 ]
 
 console.log('mylist[0].image: ', mylist[0].image)
 
 var test_stimuli_1 = [
    {stimulus: "<div><img src='img/R1-1.png'></img></div><div><img src='img/scale.png'></img></div>"}
]

console.log('test_stimuli_1[0] is: ', test_stimuli_1[0])


var test_stimuli_2 = [{stimulus: "<div><img src='img/'" + mylist[0].image + "'></img></div><div><img src='img/scale.png'></img></div>"}]

console.log('test_stimuli_2[0] is: ', test_stimuli_2[0])

Note that you can also use template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals syntax: string text ${expression} string text

So this:

var test_stimuli_2 = [{stimulus: "<div><img src='img/'" + mylist[0].image + "'></img></div><div><img src='img/scale.png'></img></div>"}]

Could be rewritten to this:

var test_stimuli_2 = [{stimulus: `<div><img src='img/${mylist[0].image}'></img></div><div><img src='img/scale.png'></img></div>`}]

read from an external .js file to tell javascript which image to display

1 Answers1