Use jquery to create a multidimensional array

Question

I'd like to use jquery and a multidemensional array to show a random quote plus the name of the individual who wrote it as a separate item. I'll then be able to use css to style them differently. The quote will change upon page refresh.

So far i have this code which combines the quote and the name and person who wrote it:

$(document).ready(function(){
var myQuotes = new Array();
      myQuotes[0] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in tortor mauris.  Peter Jones, Dragons Den";
      myQuotes[1] = "Curabitur interdum, nibh et fringilla facilisis, lacus ipsum pulvinar mauris, eu facilisis justo arcu eget diam. Duis id sagittis elit.  Theo Pathetis, Dragons Den";
      myQuotes[2] = "Vivamus purus purus, tincidunt et porttitor et, euismod sit amet urna. Etiam sollicitudin eros nec metus pretium scelerisque.  James Caan, Dragons Den";

            var myRandom = Math.floor(Math.random()*myQuotes.length); 
                $('.quote-holder blockquote span').html(myQuotes[myRandom]);
    });

any help would be greatly appreciated.

Please use a shorter title... I won't bother to read that... — user253984
– user253984, Commented Mar 22, 2010 at 13:57
It is recommended to use var xx=[] versus var xx=new Array() — JAL
– JAL, Commented Mar 22, 2010 at 14:02

Blaise · Accepted Answer · 2010-03-22 14:03:36Z

3

I would go with using JSON for this example, your code is pretty close though.

$(document).ready(function(){
  var myQuotes = [{
    "author" : "Timothy Tailor",
    "quote" : "Trimodus offers brave, challenging training..."
  },
  {
    "author" : "Stanley Senoir",
    "quote" : "Trimodus is so very challenging..."
  },
  {
    "author" : "Jeremy Pacemaker",
    "quote" : "I would be confident in recommending..."
  }];

  var myRandom = Math.floor(Math.random()*myQuotes.length); 
  $('.quote-holder blockquote span.author').html(myQuotes[myRandom].author);
  $('.quote-holder blockquote span.quote').html(myQuotes[myRandom].quote);
});

answered Mar 22, 2010 at 14:03

Blaise

1321 gold badge1 silver badge9 bronze badges

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

Comments

rfunduk · Accepted Answer · 2010-03-22 14:01:09Z

0

How about:

$(document).ready(function(){
  var myQuotes = [
    {
      quote: "Lorem ipsum dolor sit amet...",
      by:    "Peter Jones, Dragons Den"
    },
    ... more quotes ...
  ];

  var r = Math.floor( Math.random() * myQuotes.length ); 
  $('.quote-holder blockquote')
    .find('span.quote').html( myQuotes[r].quote ).end()
    .find('span.by').html( myQuotes[r].by );
});

This is assuming markup like:

<div class='quote-holder'>
  <blockquote>
    <span class='quote'></span>
    <span class='by'></span>
  </blockquote>
</div>

answered Mar 22, 2010 at 14:01

rfunduk

30.5k5 gold badges61 silver badges55 bronze badges

Comments

Joe Mastey · Accepted Answer · 2010-03-22 14:04:47Z

0

Try using the inline array operator:

$(document).ready(function(){
    var myQuotes = [];
    myQuotes[0] = [ "Lorem ipsum dolor sit amet.", "Author info" ] ;
    myQuotes[1] = [ "Lorem ipsum dolor sit amet.", "Author info" ] ;
    myQuotes[2] = [ "Lorem ipsum dolor sit amet.", "Author info" ] ;

    var idx = Math.floor(Math.random()*myQuotes.length);
    var quote = myQuotes[idx];
    $('.quote-holder blockquote span').html(quote[0]+" <span class='author'>"+ quote[1] +"</span>");
});

answered Mar 22, 2010 at 14:04

Joe Mastey

27.1k13 gold badges82 silver badges104 bronze badges

Comments

Peter · Accepted Answer · 2010-03-22 14:05:44Z

0

Why don't you just put the name of the person inside a span like so:

myQuotes[0] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in tortor mauris.  <span class="author">Peter Jones, Dragons Den</span>";

Then just style the span differently:

.quote-holder blockquote span{
//some style
}

.quote-holder blockquote span span.author{
//some other style
}

This would probably be the easiest way...

answered Mar 22, 2010 at 14:05

Peter

7677 silver badges15 bronze badges

1 Comment

rfunduk Over a year ago

You could do that, but notice how easy it is to make a mistake -- in your code you have a syntax error from using " for the class name of the interior span.

Fabiano Soriani · Accepted Answer · 2010-03-22 14:05:47Z

0

Ok, so far your array is plain (as I see), but you want to style differently the author's name and it quote. The lazy solution i see is to create 2 arrays: 1 has the quotes, 1 has the authors, so when you are going to display you do this:

  var myRandom = Math.floor(Math.random()*myQuotes.length); 
  $('span.quote').html(myQuotes[myRandom]);
  $('span.author').html(authors[myRandom]);

And then you define 2 css, 1 for .author and 1 for .quote

answered Mar 22, 2010 at 14:05

Fabiano Soriani

8,6369 gold badges45 silver badges59 bronze badges

Comments

Skilldrick · Accepted Answer · 2010-03-22 14:06:43Z

0

Change your myQuotes array to this:

var myQuotes = [['Lorem ipsum', 'Peter Jones'],
                ['Lorem ipsum', 'Theo Pathetis'],
                ['Lorem ipsum', 'Duncan Bannantyne']];

edited Mar 22, 2010 at 14:06

answered Mar 22, 2010 at 14:00

Skilldrick

71.1k37 gold badges182 silver badges231 bronze badges

Collectives™ on Stack Overflow

Use jquery to create a multidimensional array

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related