Develop Reference

Using an array as the text content

I am trying to create a system to place a the values of the array into the text.
Array:
var records = [
['C', 'Descript']
['D', 'Test']
];
Creates the 'th' that I want to put the array values in.
let newColItem = document.createElement('th');
What I have tried:
galleryheader.textContent = records[i,1];
The i is from a for loop. No values a showing in the galleryheader cell. I can't find anything on how to put the array inside on the web, anyone got some idea of what to do.
All code if you need it:
const gallery_table = document.getElementById("gallery_table");
let list = ["A", "B"];
var idName = "";
var records = [
['C', 'Descript']
['D', 'Test']
];
for (let i = 0; i < list.length; i++) {
if (i % 3 === 0) {
var newRowItem = document.createElement("tr");
idName = "newRowItem";
idName = idName.concat(i);
newRowItem.setAttribute("id", idName);
gallery_table.appendChild(newRowItem);
}
let newColItem = document.createElement('th');
let galleryheader = document.createElement('h3');
newColItem.setAttribute("class", i);
newRowItem.appendChild(newColItem);
newColItem.appendChild(galleryheader);
galleryheader.textContent = records[i,1];
const element = document.getElementById(idName);
let nodes = element.getElementsByClassName(i);
for (let j = 0; j < nodes.length; j++) {
nodes[j].style.padding = "2px";
nodes[j].style.width = "33%";
nodes[j].style.border = "1px solid black";
}
}

Combining array of strings in Javascript two at a time

I have an array of strings, how I can make combination of elements two at a time separated by underscore.
var array = ['a', 'b', 'c']; the output should be ['a_b', 'a_c', 'b_c']
How I can do this in Javascript?
Please note that this is different from Permutations in JavaScript? since we need a combination of two and cannot be array elements cannot be replicated.
Thanks.

You can use nested loops to achieve something like that:
var arr = ['a', 'b', 'c'];
var newArr = [];
for (var i=0; i < arr.length-1; i++) { //Loop through each item in the array
for (var j=i+1; j < arr.length; j++) { //Loop through each item after it
newArr.push(arr[i] + '_' + arr[j]); //Append them
}
}
console.log(newArr);
I've elected to mark this as a community post because I think a question that shows no attempt shouldn't merit reputation, personally.

A solution could be:
function combine(arr) {
if (arr.length === 1) {
return arr; // end of chain, just return the array
}
var result = [];
for (var i = 0; i < arr.length; i++) {
var element = arr[i] + "_";
for (var j = i+1; j < arr.length; j++) {
result.push(element + arr[j]);
}
}
return result;
}

It should be an double for, something like this:
var output = [];
var array = ['a', 'b', 'c'];
for(var i = 0; i < array.length; i++){
for(var j = 0; j < array.length; j++) {
output.push(array[i] + "_" + array[j]);
}
}
The output is:
["a_a", "a_b", "a_c", "b_a", "b_b", "b_c", "c_a", "c_b", "c_c"]

Creating div element with a for Loop

This is a really simple question but I don't know why it doesn't work. I have an array with 4 items inside. And I have a container which I would like to insert a number of divs based on the number of items in my array. I used a for loop for this but it is only creating one div. Should it not create 4 of the same div elements?
This is the code:
count = new Array['1', '2', '3', '4'];
container = document.getElementById('items');
for (i = 0; i < count.length; i++) {
container.innerHTML += '<div id="items"></div>';
}
#items {
width: 20px;
height: 20px;
background: gold;
}
<div id="items"></div>
This is the link http://codepen.io/2bu/pen/jyxNbw

The way you are creating the array is incorrect.
Try this instead:
var count = ['1', '2', '3', '4'];
Note: Inside the for loop, you are creating elements that have the same ID. IDs should be unique.
Also, as mentioned you will want to append to the 'items' div instead of adding a new div with a duplicate id.
I would do something like this:
var count = ['1','2','3','4'];
var container = document.getElementById('items');
for(var i = 0; i < count.length; i++){
container.append('<div>' + count[i] + '</div>');
}
And to improve the iteration:
var counts = ['1','2','3','4'];
var container = document.getElementById('items');
counts.forEach(function(count) {
container.append('<div>' + count + '</div>');
});
It is rarely necessary to use for(var i = 0; i < x; i++). Using forEach, map or reduce are considerably better (code is more concise, temporary variables are unnecessary etc.).

1)You cannot create more DOM elements with same id.Use classes instead.
2)You have to define the array in the following way: var count = ['1', '2', '3', '4'];
Here is the final code:
// var container = document.getElementById("container");
// for (var i = 0; i < array.length; i++) {
// container.innerHTML += '<div class="box"></div>';
// }
count = ['1','2','3','4'];
container = document.getElementById('itemsContainer');
for(i = 0; i < count.length; i++){
container.innerHTML+='<div class="items"></div>';
}
var square= document.getElementsByClassName('items')[2];
square.style.backgroundColor='red';
.items{
margin-top:10px;
width:20px;
height:20px;
background:gold;
}
<div id="itemsContainer"></div>
If you want to access one items DOM element, you have to use document.getElementsByClassName() method which returns a NodeList.
var square= document.getElementsByClassName('items')[2];
square.style.backgroundColor='red';

Convert table to array in JavaScript without using jQuery

I need to convert the table grid i created into an multidimensional array according to the content inside the table. Array would be in format like:
var array = [
[column,column,...],
[column,column,...],
...
];
How do I do this without using jQuery, using plain JavaScript? All answers I found was in jQuery.
JSFiddle.

With qSA and Array.prototype.map is pretty simple.
var tableInfo = Array.prototype.map.call(document.querySelectorAll('#tableId tr'), function(tr){
return Array.prototype.map.call(tr.querySelectorAll('td'), function(td){
return td.innerHTML;
});
});

Presuming your table is something like the one below, you can convert that into an array of arrays using the rows collection of the table and cells collection of the rows:
function tableToArray(table) {
var result = []
var rows = table.rows;
var cells, t;
// Iterate over rows
for (var i=0, iLen=rows.length; i<iLen; i++) {
cells = rows[i].cells;
t = [];
// Iterate over cells
for (var j=0, jLen=cells.length; j<jLen; j++) {
t.push(cells[j].textContent);
}
result.push(t);
}
return result;
}
document.write(JSON.stringify(tableToArray(document.getElementsByTagName('table')[0])));
<table>
<tr>
<td>one<td>two<td>three
<tr>
<td>one<td>two<td>three
<tr>
<td>one<td>two<td>three
</table>
Or if like concise code, use some ES5 goodness:
function tableToArray(table) {
var result = [].reduce.call(table.rows, function (result, row) {
result.push([].reduce.call(row.cells, function(res, cell) {
res.push(cell.textContent);
return res;
}, []));
return result;
}, []);
return result;
}

you can get all the tr inside a table (having id table1) by doing
var tableObj = document.getElementById( "table1" );
var arr = [];
var allTRs = tableObj.getElementsByTagName( "tr" );
for ( var trCounter = 0; trCounter < allTRs.length; trCounter++ )
{
var tmpArr = [];
var allTDsInTR = allTRs[ trCounter ].getElementsByTagName( "td" );
for ( var tdCounter = 0; tdCounter < allTDsInTR.length; tdCounter++ )
{
tmpArr.push( allTDsInTR[ tdCounter ].innerHTML );
}
arr.push( tmpArr );
}
console.log( arr );

Run a for loop through the rows and the fields:
var array = [];
var table = document.querySelector("table tbody");
var rows = table.children;
for (var i = 0; i < rows.length; i++) {
var fields = rows[i].children;
var rowArray = [];
for (var j = 0; j < fields.length; j++) {
rowArray.push(fields[j].innerHTML);
}
array.push(rowArray);
}
console.log(array);
JSfiddle.

Having an array of values how to form a frames grid?

So I have an array with 3 items - 'a', 'b', 'c' I want ot create inside some div a frameset grid (resizable if possible) where each frame has its source in someStringVar + arrayItem[i].ToString() How to do such thing with jQuery?

HTML
<frameset id="myframeset">
</frameset>
jS
var myArray = ['a','b','c'];
var cols = [];
for(var i=0; i<myArray.length; i++) cols.push((100/myArray.length)+"%");
$("#myframeset").attr("cols", cols.toString());
for(var i=0; i<myArray.length; i++){
$("frame", { src: "http://www.mysite.com/"+myArray[i]+.".htm" }).appendTo("#myframeset");
}