Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Chris Gaona
.a{fill-rule:evenodd;}techdegree seal-36
Chris Gaona
Full Stack JavaScript Techdegree Graduate 31,350 Points

Using Math.Random with a JSON file

I've been trying to simplify my javascript code by putting all my array items into a JSON file. I am successfully able to grab the proper, random items from the arrays when they are on my javascript file, but I've been unsuccessful with pulling those same items from the array in the JSON file. Can anyone please help me?

See the example of the my array in the JSON file and the code in my javascript file to pull random items from that JSON file.

var heroItems = [
    {
        "image" : "/img/parasailing-pic.jpg",
        "title" : "How about some parasailing?",
        "paragraph" : "Parasailing is so much fun! You should definitely try it!"
    },
    {
        "image" : "/img/boating-pic.jpg",
        "title" : "How about some boating?",
        "paragraph" : "Just add on some water skiing, or maybe some wakeboarding and you're all set!"    
    }
];



function randomHero() {
        var url="random-button.json";
        $.getJSON(url, function(response) {
        var arrayRandom = Math.floor(Math.random() * response.length);
        $('.modal-body').css({
        'background' : 'url('+ response[arrayRandom].image + ') no-repeat',
        'background-position' : 'center',
        'background-size' : 'cover'
        });
        $('.modal-title').html(response[arrayRandom].title);
        $('.modal-body p').html(response[arrayRandom].paragraph);      
      }); //end getJSON
    }
    randomHero();
    $('#random-button').on('click', randomHero);
Chyno Deluxe
Chyno Deluxe
16,936 Points

Fixed Code Presentation

Chris Gaona
.a{fill-rule:evenodd;}techdegree seal-36
Chris Gaona
Full Stack JavaScript Techdegree Graduate 31,350 Points

Thank you so much Samuel! What you have suggested works perfect now! I didn't realize that I had set up my JSON file wrong.

I think you may have posted in the comment section instead of the answer section, which is why I can't mark it best answer. If you move your response to the answer section, I'll mark it best answer. Thank you again!

1 Answer

Samuel Webb
Samuel Webb
25,370 Points

The response variable should be a JS object at the point that you're using response[arrayRandom].image. That doesn't work because you don't access object properties with an index, like you do with arrays. You access it by using the property name. Can you show your actual JSON file because that heroItems variable wouldn't be proper JSON? It should all be contained using an object literal, not an array literal. JSON = JavaScript Object Notation.

{
  "heroItems" : [
      {
          "image" : "/img/parasailing-pic.jpg",
          "title" : "How about some parasailing?",
          "paragraph" : "Parasailing is so much fun! You should definitely try it!"
      },
      {
          "image" : "/img/boating-pic.jpg",
          "title" : "How about some boating?",
          "paragraph" : "Just add on some water skiing, or maybe some wakeboarding and you're all set!"    
      }
  ]
}

Then you should be able to do something like:

response.heroItems[arrayRandom].image
Chyno Deluxe
Chyno Deluxe
16,936 Points

//Changed Comment To Answer

Samuel Webb
Samuel Webb
25,370 Points

Thanks for moving it Chyno Deluxe. I hadn't logged back on yet.

Chris Gaona no problem, glad to help.