Dynamically change Image content using JSON file?

Question

Essentially I want to create a JS script (using jQuery) that uses the id of a clicked <div class="box"> element, finds the corresponding "id" value in the JSON file, and then adds the "image" url value to the <div class="output-box"> element. I'm not sure whether the best way to do this would be via an <img> tag, or by changing the CSS background-image property using the jQuery code, (or another way entirely), as ideally I'd like to fade between the images as the user clicks on each box.

I have a HTML file set up as follows:

<div class="box" id="1"><h1>Box 1</h1></div>
<div class="box" id="2"><h1>Box 2</h1></div>
<div class="box" id="3"><h1>Box 3</h1></div>

<div class="output-box"></div>

And a separate JSON file:

{    
    "content" : [
        {
        "id"     : 1,
        "image"  : "img/test01.jpg"
        },        
        {
        "id"     : 2,
        "image"  : "img/test02.jpg"
        },        
        {
        "id"     : 3,
        "image"  : "img/test03.jpg"
        }        
    ]    
}

And a JS file (using jQuery), set up as follows:

$.getJSON('content.json', function (data) {

    "use strict";

    var content = data.content;


    $('.box').click(function () {

        //Box <div> id is obtained on click
        //Object with corresponding 'id' value from JSON file is then found
        //Image url is then used to add the image to the '.output-box' <div>

    });

});

This needs to be easily scalable and work regardless of how many <div class="box"> elements are added.

Detailed answers would be appreciated, as I'm still fairly new to JS and JSON and haven't found any that exactly explain what I'm trying to achieve.

Thanks! :)

it's not a good idea to have the id as a number. Try to add a prefix that makes it unique. Ex: id="image-1". Also for semantics, you should only have one <h1> tag on your page. — Ibu
– Ibu, Commented Dec 4, 2017 at 21:44
Thanks @Ibu , I've heard conflicting opinions on whether it's ok to use numbers as IDs, what's the reason for it being a bad idea? — Hexbob6
– Hexbob6, Commented Dec 4, 2017 at 21:47

James · Accepted Answer · 2017-12-04 21:39:05Z

2

Here's one way to do it:

// set a click handler on all .box elements
$('.box').click(function () {

  // return the first element, if it exists, of the content array that has a matching id to the clicked .box element's id
  var c = content.find(o => o.id == this.id);

  // make sure there was a match
  if (c) {
    // append an image with the appropriate .src property
    $('.output-box').append("<img src='" + c.image + "'>");
  }
});

edited Dec 4, 2017 at 21:39

answered Dec 4, 2017 at 20:02

James

22.4k5 gold badges29 silver badges44 bronze badges

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

2 Comments

Hexbob6 Over a year ago

Thanks for the concise answer @James , think I understand everything but would you mind adding some comments to explain what each part does?

James Over a year ago

Hopefully that explains it ok!

Collectives™ on Stack Overflow

Dynamically change Image content using JSON file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related