Data Attributes referencing Arrays

Question

I'm building a trivia game, and all the questions, answer choices and correct answers are to be stored in different multidimensional arrays arranged by category. example: historyArray contians all the history data, etc.

I'm also using bootstrap from my front end UI and would like to be able to use a data attribute to reference a specific array, and dynamically load a question from that array into a modal that will launch when pressing a button.

Here's what I have so far:

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#activeQuestion" data-category="historyArray">
  Launch Random Question
</button>

<div class="modal fade activeQuestion" id="activeQuestion" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Category Title</h4>
      </div>
      <div class="modal-body">
        <form>
            <div class="row">
                <div class="col-xs-12 question">
                    <p></p>
                </div>
                <div class="col-xs-12 answers">
                    <ul class="answer-list">
                    </ul>
                </div>
            </div>
        </form>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS:

var historyCount = 0;

$(document).ready(function(){
    //$('#activeQuestion').modal('show');

    var historyArray = {
        'q0' : {
            'question': 'Which U.S. President is on the 1,000 dollar bill?',
            'a1': 'Ulysses S. Grant',
            'a2': 'Grover Cleveland',
            'a3': 'William McKinley',
            'correct': '1'
        }
    }
});

$('#activeQuestion').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var aCat = button.data('category');
    console.log(aCat);
})

Currently, the console.log only returns the value of the data-attribute, not the array. How can I return the array in the console.log so then I can parse through the array, grabbing the question, answer choices and correct answer so I can display them. I've tried using console.log(aCat[0]), but that only returns 'h', the first letter in the variable name.

`historyArray` is not an array. It's just an object. And `data('category')` will return a string. For the rest, read the answers to [Convert string to variable name in JavaScript](//stackoverflow.com/q/5613834) — Heretic Monkey, Mar 14 '18 at 19:05
@MikeMcCaughan - yep, that's what it was... I reformatted my object into an actual multidimensional array, and then after the button clicked and grabbed the `data attribute`, I run that `attribute + "Array"` in an `eval()` and I'm able to return the array perfectly. — Murphy1976, Mar 14 '18 at 19:56

score 2 · Answer 1 · answered Mar 14 '18 at 19:14

2

There's a couple of misunderstandings here first you're mistaking arrays for objects arrays are lists [] and objects are key-value pairs. {something: somethingelse} to resolve your issue first you need a way of accessing the correct list of questions.

change this in your HTML

data-category="historyObject"

and wrap your history object in an object called questions

    var questions = {
       historyObject: {
         'q0' : {
           'question': 'Which U.S. President is on the 1,000 dollar bill?',
           'a1': 'Ulysses S. Grant',
           'a2': 'Grover Cleveland',
           'a3': 'William McKinley',
           'correct': '1'
         }
      }
    }

Now we're able to access the historyObject by questions[aCat] but it won't work yet your object is in its own scope meaning you won't be able to access questions from your event listener unless you move

$('#activeQuestion').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var aCat = button.data('category');
    console.log(questions[aCat]);
})

into your onload.

hope this helped.

answered Mar 14 '18 at 19:14

Joe Warner

3,335
1
14
41

so say the historyObject had more than one question in it, would I simply reference the FIRST question by looking at `questions[aCat][0]`? – Murphy1976 Mar 14 '18 at 19:30
well you've named it q0 so you can use the dot notation to access it questions[aCat].q0 and so on and so forth questions[aCat].q0.a1 questions[aCat].q0.correct :) – Joe Warner Mar 14 '18 at 19:38
the reason I'm asking for a more dynamic solution is that I will eventually be shuffling up the entries in each object. So initially, q0 will be q0, but after the contents are all shuffled up, q0 may be q10. – Murphy1976 Mar 14 '18 at 19:40
you can randomize which question by `'q${Math.random() * 10}'` the quotes are meant to be back tics lol math.random generates a number between 0-1 so times it by 10 gets us a random number between 0-10 – Joe Warner Mar 14 '18 at 19:42
but there is a chance I could have a duplicate question loaded in. I do not want that – Murphy1976 Mar 14 '18 at 19:45
then you can push that value into an array and then check when you make the next question that it hasn't been shown i'd use a lib like lodash to `_.unqi(['q0','q8'])` – Joe Warner Mar 14 '18 at 19:47

Igor · Answer 2 · 2018-03-14T19:14:15.700

Short of providing JSON string as data- attribute value, you can put questions on different topics in the same object (topicArrays below) and access them using data-category values as property keys.

var topicArrays = {};

var historyCount = 0;
$(document).ready(function(){
    //$('#activeQuestion').modal('show');

    topicArrays.historyArray = {
        'q0' : {
            'question': 'Which U.S. President is on the 1,000 dollar bill?',
            'a1': 'Ulysses S. Grant',
            'a2': 'Grover Cleveland',
            'a3': 'William McKinley',
            'correct': '1'
        }
    };
});

$('#activeQuestion').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var aCat = topicArrays[button.data('category')];
    console.log(aCat);
});

Data Attributes referencing Arrays

2 Answers2

Linked