Develop Reference

Randomising array from a matrix (bidimensional array)

I Currently have the following matrix
const fileName = [
["a01", "b01", "c01", "d01", "e01", "f01", "g01", "h01", "i01", "j01", "k01", "l01"],
["a02", "b02", "c02", "d02", "e02", "f02", "g02", "h02", "i02", "j02", "k02", "l02"],
["a03", "b03", "c03", "d03", "e03", "f03", "g03", "h03", "i03", "j03", "k03", "l03"],
["a04", "b04", "c04", "d04", "e04", "f04", "g04", "h04", "i04", "j04", "k04", "l04"],
["a05", "b05", "c05", "d05", "e05", "f05", "g05", "h05", "i05", "j05", "k05", "l05"],
["a06", "b06", "c06", "d06", "e06", "f06", "g06", "h06", "i06", "j06", "k06", "l06"],
["a07", "b07", "c07", "d07", "e07", "f07", "g07", "h07", "i07", "j07", "k07", "l07"],
["a08", "b08", "c08", "d08", "e08", "f08", "g08", "h08", "i08", "j08", "k08", "l08"],
["a09", "b09", "c09", "d09", "e09", "f09", "g09", "h09", "i09", "j09", "k09", "l09"],
["a10", "b10", "c10", "d10", "e10", "f10", "g10", "h10", "i10", "j10", "k10", "l10"],
["a11", "b11", "c11", "d11", "e11", "f11", "g11", "h11", "i11", "j11", "k11", "l11"],
["a12", "b12", "c12", "d12", "e12", "f12", "g12", "h12", "i12", "j12", "k12", "l12"]
];
and I create a new array with filenames from it randomising 1 item of each subarray using this function:
function randomise() {
let sequence = fileName.map(option => {
const random = Math.floor(Math.random() * 11);
return option[random];
});
let randomSelection = sequence.map(createURL);
function createURL(fileName) {
return `assets/music/${fileName}.mp3`;
}
console.log(randomSelection);
}
So I get an array such as:
["assets/music/f01.mp3", "assets/music/f02.mp3", "assets/music/b03.mp3", "assets/music/k04.mp3", "assets/music/b05.mp3", "assets/music/f06.mp3", "assets/music/i07.mp3", "assets/music/d08.mp3", "assets/music/d09.mp3", "assets/music/g10.mp3", "assets/music/a11.mp3", "assets/music/d12.mp3"]
But I want to rearrange my matrix in this way:
const fileName = [
["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11", "a12"],
["b01", "b02", "b03", "b04", "b05", "b06", "b07", "b08", "b09", "b10", "b11", "b12"],
["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12"],
["d01", "d02", "d03", "d04", "d05", "d06", "d07", "d08", "d09", "d10", "d11", "d12"],
["e01", "e02", "e03", "e04", "e05", "e06", "e07", "e08", "e09", "e10", "e11", "e12"],
["f01", "f02", "f03", "f04", "f05", "f06", "f07", "f08", "f09", "f10", "f11", "f12"],
["g01", "g02", "g03", "g04", "g05", "g06", "g07", "g08", "g09", "g10", "g11", "g12"],
["h01", "h02", "h03", "h04", "h05", "h06", "h07", "h08", "h09", "h10", "h11", "h12"],
["i01", "i02", "i03", "i04", "i05", "i06", "i07", "i08", "i09", "i10", "i11", "i12"],
["j01", "j02", "j03", "j04", "j05", "j06", "j07", "j08", "j09", "j10", "j11", "j12"],
["k01", "k02", "k03", "k04", "k05", "k06", "k07", "k08", "k09", "k10", "k11", "k12"]
];
I need to randomly select 1 item from each of the indexes of those subarrays, so one random item ending with "1", another ending with "2", etc
Could you help me please? Thanks!

If these are the actual values of the array you're using, you can just loop from 1 through 12 and stick it together with a random character from the string "abcdefghijk" using randojs' rando() function (or otherwise if you prefer).
for(var i = 1; i <= 12; i++){
console.log("assets/music/" + rando("abcdefghijk") + (i < 10 ? "0" : "") + i + ".mp3")
}
<script src="https://randojs.com/1.0.0.js"></script>
This code uses randojs.com to simplify the randomness and make it easier to read, so if you want to use this code, make sure this is in the head tag of your html document:
<script src="https://randojs.com/1.0.0.js"></script>
To answer the second part of your question (which you posted as another answer to this question), you don't need to keep your fileName variable to construct the HTML here if you'd rather not. You can do it like this instead:
var letters = "abcdefghijk";
for(var i = 0; i < letters.length; i++){
var musicRowID = letters.charAt(i) + "01";
$("#music-grid").append(`<div id="music-row-${musicRowID}" class="row no-gutters"></div>`);
for(var j = 1; j <= 12; j++){
var columnID = letters.charAt(i) + (j < 10 ? "0" : "") + j;
$(`#music-row-${musicRowID}`).append(`<div class="col-1"><button id="${columnID}" class="btn bar song">${columnID.toUpperCase()}</button></div>`);
}
}

Very beautiful Aaron! I created the array like this:
let randomSelection = new Array();
function randomise() {
for (let i = 1; i <= 12; i++) {
let index = `assets/music/${rando("abcdefghijkl")}${i < 10 ? "0" : ""}${i}.mp3`;
randomSelection.push(index);
}
}
randomise()
The only problem now is that I was using the code below to populate a grid based in my fileName variable...
fileName.forEach(row => {
$("#music-grid").append(`<div id="music-row-${row.slice(0, 1)}" class="row no-gutters"></div>`);
row.forEach(col => {
$(`#music-row-${row.slice(0, 1)}`).append(
`<div class="col-1"><button id="${col}" class="btn bar song">${col.toUpperCase()}</button></div>`
);
});
});
Do you reckon it is better to keep my original fileName variable in order to allow it to populate the grid?
Thanks so much!

If I understood you correctly this will give you your desired output. Picking one letter for each number. Hope this helps for whatever you need it.
const fileName = [
["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11", "a12"],
["b01", "b02", "b03", "b04", "b05", "b06", "b07", "b08", "b09", "b10", "b11", "b12"],
["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12"],
["d01", "d02", "d03", "d04", "d05", "d06", "d07", "d08", "d09", "d10", "d11", "d12"],
["e01", "e02", "e03", "e04", "e05", "e06", "e07", "e08", "e09", "e10", "e11", "e12"],
["f01", "f02", "f03", "f04", "f05", "f06", "f07", "f08", "f09", "f10", "f11", "f12"],
["g01", "g02", "g03", "g04", "g05", "g06", "g07", "g08", "g09", "g10", "g11", "g12"],
["h01", "h02", "h03", "h04", "h05", "h06", "h07", "h08", "h09", "h10", "h11", "h12"],
["i01", "i02", "i03", "i04", "i05", "i06", "i07", "i08", "i09", "i10", "i11", "i12"],
["j01", "j02", "j03", "j04", "j05", "j06", "j07", "j08", "j09", "j10", "j11", "j12"],
["k01", "k02", "k03", "k04", "k05", "k06", "k07", "k08", "k09", "k10", "k11", "k12"]
];
let pickedValues = [];
for (i = 0; i <= fileName.length; i++) {
let index = Math.floor(Math.random() * ((fileName.length - 1) - 0 + 1));
pickedValues[i] = (fileName[index][i]);
}
console.log(pickedValues);

How to get the values of multiple JSON arrays using checkboxes?

HTML and JS
<div class="form-group form-inline text-center">
<label for="select_category">Select Category</label> 
<select class="custom-select" id="select_category" style="width: 500px;" onchange="listcatcb();">
<option selected></option>
</select>
</div>
<div class="container" id="cats">
<div class="form-check" id="catrbs"> </div>
<button class="btn btn-outline-secondary" onclick="nextcats();">Click Next!</button>
</div>
getallcategory();
function getallcategory() {
var link = 'allcat.json';
$.post(link).done(function (data) {
data2 = JSON.stringify(data);
var obj = jQuery.parseJSON(data2);
for (var i = 0; i < obj.length; i++) {
$("#select_category").append('<option value="' + obj[i].name + '">' + obj[i].name + '</option> ')
}
});
}
function listcatcb() {
selcat = document.getElementById("select_category").value;
var link = 'allcat.json';
$.post(link).done(function (data) {
data2 = JSON.stringify(data);
var obj = jQuery.parseJSON(data2);
for (var i = 0; i < obj.length; i++) {
if (obj[i].name == selcat) {
for (var j = 0; j < obj.length; j++) {
$("#catrbs").append('<input class="form-check-input catcbs" type="checkbox" id="' + obj[i].siblings[
j].name + '" value="' + obj[i].siblings[j].name + '"><label class="form-check-label" for="' +
obj[i].siblings[j].name + '">' +
obj[i].siblings[j].name +
'</label><br/>')
}
}
}
});
}
function nextcats() {
var link = 'allcat.json';
var checkedValue = $('.catcbs:checked').val();;
$.post(link).done(function (data) {
data2 = JSON.stringify(data);
var obj = jQuery.parseJSON(data2);
for (var i = 0; i < obj.length; i++) {
if (obj[i].name == selcat) {
for (var j = 0; j < obj.length; j++) {
if (obj[i].siblings[j].name == checkedValue) {
for (var k = 0; k < obj.length; k++) {
console.log(obj[i].siblings[j].siblings[k].name);
}
}
}
}
}
});
}
allcat.json
[ { "id" : "47"
, "name" : "Women"
, "parent" : "0"
, "status" : "Enabled"
, "itemcount": 44
, "siblings":
[ { "id" : "87"
, "name" : "Personal Care Appliances"
, "parent" : "47"
, "status" : "Enabled"
, "itemcount": 2
, "siblings":
[ { "id" : "88"
, "name" : "Hair Dryers"
, "parent" : "87"
, "status" : "Enabled"
, "itemcount": 2
, "siblings" : []
} ] }
, { "id" : "127"
, "name" : "Jewellary"
, "parent" : "47"
, "status" : "Enabled"
, "itemcount": 41
, "siblings":
[ { "id" : "128"
, "name" : "Artificial Jewellary"
, "parent" : "127"
, "status" : "Enabled"
, "itemcount": 41
, "siblings" : []
} ] } ] } ]
Here in this code if I select the 2 checkbox once at a time means I'm getting the output of only first JSON value...
if I uncheck one means I'm getting its respective values...
I mean for example if I select women from a category then I'm getting 2 checkboxes as 1.personal care appliances and 2.jewellery.
if I select multiple checkboxes once at the time means I'm getting only hair dryers(the value within personal care appliances) but I'm not getting artificial jewellery(value within jewellery)
if I select single at a time means I'm getting appropriate result please help me out with this error...
I've stuck here.

You had made a couple of mistakes in the for loop, please check the updated code snippet.
Here for (var j = 0; j < obj[i].siblings.length; j++) you missed to add siblings.
Here var checkedValue = $('.catcbs:checked').map(function(){
return $(this).val();
}).get();, here you was getting only single value, updated it to get the value in array.
Please go through it and let me know if you have any confusions.
const jsonData =
[
{
"id":"47",
"name":"Women",
"parent":"0",
"status":"Enabled",
"itemcount":44,
"siblings":[
{
"id":"87",
"name":"Personal Care Appliances",
"parent":"47",
"status":"Enabled",
"itemcount":2,
"siblings":[
{
"id":"88",
"name":"Hair Dryers",
"parent":"87",
"status":"Enabled",
"itemcount":2,
"siblings":[
]
}
]
},
{
"id":"127",
"name":"Jewellary",
"parent":"47",
"status":"Enabled",
"itemcount":41,
"siblings":[
{
"id":"128",
"name":"Artificial Jewellary",
"parent":"127",
"status":"Enabled",
"itemcount":41,
"siblings":[
]
}
]
}
]
}
];
function getallcategory() {
var link = jsonData;
for (var i = 0; i < link.length; i++) {
$("#select_category").append('<option value="' + link[i].name + '">' + link[i].name + '</option> ')
}
}
function listcatcb() {
selcat = document.getElementById("select_category").value;
var obj = jsonData;
for (var i = 0; i < obj.length; i++) {
if (obj[i].name == selcat) {
for (var j = 0; j < obj[i].siblings.length; j++) {
$("#catrbs").append('<input class="form-check-input catcbs" type="checkbox" id="' + obj[i].siblings[
j].name + '" value="' + obj[i].siblings[j].name + '"><label class="form-check-label" for="' +
obj[i].siblings[j].name + '">' +
obj[i].siblings[j].name +
'</label><br/>')
}
}
}
}
function nextcats() {
var obj = jsonData;
var checkedValue = $('.catcbs:checked').map(function(){
return $(this).val();
}).get();
var selectedItem='';
for (var i = 0; i < obj.length; i++) {
if (obj[i].name == selcat) {
for (var j = 0; j < obj[i].siblings.length; j++) {
if (checkedValue.indexOf(obj[i].siblings[j].name) != -1) {
for (var k = 0; k < obj.length; k++) {
selectedItem += `<p>${obj[i].siblings[j].siblings[k].name}</p>`;
}
}
}
}
}
$('#selected-item').html(selectedItem)
}
getallcategory();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="form-group form-inline text-center">
<label for="select_category">Select Category</label> 
<select class="custom-select" id="select_category" style="width: 500px;" onchange="listcatcb();">
<option selected></option>
</select>
</div>
<div class="container" id="cats">
<div class="form-check" id="catrbs"> </div>
<button class="btn btn-outline-secondary" onclick="nextcats();">Click Next!</button>
</div>
<div class="container" id="selected-item">
</div>
</div>

Getting the value of "on" for radio buttons

var allQuestions = [{
question1: "What is 1 + 1?",
choices: ["1", "2", "3", 4],
correctAnswer: ["2"]
}, {
question2: "What is 2 + 2?",
choices: ["6", "2", "3", 4, ],
correctAnswer: ["4"]
}, {
question3: "What is 3 + 3?",
choices: ["3", "6", "9", 12],
correctAnswer: ["6"]
}];
var newArray = shuffleArray(allQuestions);
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function appendQuestions(number) {
if (newArray == "undefined" || newArray == "null" || newArray.length == 0) {
document.getElementById("questionForm").innerHTML = "Complete!";
} else {
for (i = 0; i < 4; i++) {
$("#questionForm").append("<input name='question' type='radio'>" +
JSON.stringify(newArray[0].choices[i]) + "</input>")
}
}
}
$(function() {
$("#questionList").empty();
appendQuestions();
newArray.shift();
})
function isCorrectAnswer() {
checkedVal = $("input[type=radio][name=question]:checked").val();
if (checkedVal == newArray[0].correctAnswer) {
alert("Correct!");
} else {
alert("Wrong!");
}
alert(checkedVal);
}
$("#submitButton").click(function() {
isCorrectAnswer();
$("#questionForm").empty();
appendQuestions();
newArray.shift();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<section id='questions'>
<form id="questionForm">
</form>
<div style='clear:both'></div>
<input id='submitButton' type='button' value='Submit'>
</section>
</div>
First off, sorry for the amount of code pasted. I have no idea if I'm missing some small bug or if I'm just writing the wrong code, so I figured it would be best to post all of it.
I am trying to get the value of a radio button. In the isCorrectAnswer function the first 2 lines are to determine the value of the radio button that is currently checked. The problem is when I alert the value of the radio button, it just says "on". I have searched for the last hour trying to figure out what this means or how to fix it and could not find a thing.
I apologize if this is a stupid question or if it has already been answered.

You have to change this line :
$("#questionForm").append("<input name='question' type='radio'>" +
JSON.stringify(newArray[0].choices[i]) + "</input>");
To :
$("#questionForm").append("<input name='question' type='radio' value='" +
JSON.stringify(newArray[0].correctAnswer[i]) + "' />"+JSON.stringify(newArray[0].choices[i]));
Hope this helps.

Output array to element classes

I'm trying to output a JSON object to different parts of an HTML page using the same classes.
I'm importing my JSON from an API but when I've put information into it (via input fields) it looks a little bit like this:
{
"trip": [
{ // the first object in the trip-array
"leg": [{
"tripid": "0",
"origin": {
"name": "New York",
"time": "12:04"
},
"destination": {
"name": "Albany",
"time": "1:49"
}
},{
"tripid": "1",
"origin": {
"name": "Albany",
"time": "2:05"
},
"destination": {
"name": "Boston",
"time": "3:12"
}
}]
},
{ // the second object in the trip-array
"leg": [{
"tripid": "0",
"origin": {
"name": "New York",
"time": "1:04"
},
"destination": {
"name": "Albany",
"time": "2:49"
}
},{
"tripid": "1",
"origin": {
"name": "Albany",
"time": "3:05"
},
"destination": {
"name": "Boston",
"time": "4:12"
}
}]
}]
}
I'm trying to display the information on my website, but I can't get it to behave the way I want it to.
The first time around I did it something like this (after fetching the JSON via my PHP-page):
function addDataToHTML(data){
var trips = data.trip;
$.each(trips, function(){
document.getElementById('show_all_results');
var summary = document.createElement('div');
summary.innerHTML = "<span class='origin_time'>" + this.leg[0].origin.time +
" </span><span class='origin_name'> " + this.leg[0].origin.name +
"</span><span>-</span><span class='destination_time'>" + this.leg[leg.length-1].destination.time +
" </span><span class='destination_name'> " + this.leg[this.leg.length-1].destination.name +
"</span>";
document.getElementById('show_all_results').appendChild(summary);
});
}
This works but the problem I'm having is that I want to add a button in the code which would give me more information via a display:block/none-functionality. The button (and the rest of the information) would be created similarly with me having to write it in the innerHTML part of the JS, but all the ways that I've tried haven't worked and I guess it's all about me creating the divs and other DOM objects in the JS code which means that the HTML doesn't really recognize them.
Anyhow, to get more control of the code I'm now trying something like this with the HTML:
<div id="show_all_results">
<div id='search_result_single'> // First results....
<div id='search_result_from_box'>
<span class="origin_time"></span>
<span class="origin_name"></span>
</div>
<div id='search_result_divider'>
<span>-</span>
</div>
<div id='search_result_to_box'>
<span class='destination_time'></span>
<span class='destination_name'></span>
</div>
</div>
<div id='search_result_single'> // Second results....
<div id='search_result_from_box'>
<span class="origin_time"></span>
<span class="origin_name"></span>
</div>
<div id='search_result_divider'>
<span>-</span>
</div>
<div id='search_result_to_box'>
<span class='destination_time'></span>
<span class='destination_name'></span>
</div>
</div>
...and so on.
</div>
The JS:
for (var i = 0; i < this.leg.length; i++) {
var originName = document.getElementsByClassName("origin_name");
var originTime = document.getElementsByClassName("origin_time");
var destTime = document.getElementsByClassName("destination_time");
var destName = document.getElementsByClassName("destination_name");
for (var x = 0; x < originName.length; x++) {
var originNameItem = originName[x];
originNameItem.innerHTML = this.leg[0].origin.name;
}
for (var y = 0; y < originTime.length; y++) {
var originTimeItem = originTime[y];
originTimeItem.innerHTML = this.leg[i].origin.time;
}
for (var z = 0; z < destTime.length; z++) {
var destTimeItem = destTime[z];
destTimeItem.innerHTML = this.leg[this.leg.length - 1].destination.time;
}
for (var a = 0; a < destName.length; a++) {
var destNameItem = destName[a];
destNameItem.innerHTML = this.leg[this.leg.length - 1].destination.name;
}
}
Is there anybody that can help me get each part of the leg-array into different parts of the page using the same classes as I've done? Or is there a better way?
This became really long, sorry about that, but please let me know if I can provide any additional information. Thanks!

Find element by data attributes that use "|" as separators

Fiddle Example
HTML markup:
<div data-id='23|24|25'></div>
<div data-id='29|30|31'></div>
Script:
var array = [
{
"mid": "24"
},
{
"mid": "26"
},
{
"mid": "28"
},
{
"mid": "29"
},
{
"mid": "30"
},
{
"mid": "31"
}
];
var item_html ="";
$.each(array,function(i,k) {
item_html = '<h3>'+k["mid"]+'</h3>';
$('div[data-id="'+k["mid"]+'"').append(item_html); ???????????
});
Would it be possible to find the div element if part of the "|" separated value in its data-id matches the mid?
I'm trying to get an output like this:
<div data-id='23|24|25'>
<h3>24</h3>
</div>
<div data-id='29|30|31'>
<h3>29</h3>
<h3>30</h3>
<h3>31</h3>

You should use the *= selector (contains):
$('div[data-id*="'+k["mid"]+'"').append(item_html);

The result you are looking for is something tricky. I have update your code. hope this will help you.
var array = [
{ "mid": "24"},
{"mid": "26"},
{"mid": "28"},
{"mid": "29"},
{"mid": "30"},
{"mid": "31"}
];
$('[data-id]').each(function(){
var $this = $(this), dataArr = $this.data('id').split('|'), i = 0;
for(;i< dataArr.length; i++) {
if(numInObjArr(array,dataArr[i])) {
$this.append('<h3>'+ dataArr[i] +'</h3>');
}
}
});
//function to check number in array object provided above
function numInObjArr(objArr, num){
for (var i = 0, len=objArr.length; i< len; i++){
if(objArr[i]["mid"] == num) {
return true;
}
}
return false;
}
http://jsfiddle.net/EZ56N/73/ to see the working example