For loop to create multiple elements?

Question

I am displaying data from a Google Fusion Table on my website. So far I am able to display the data as p tags.

<p>Hotel Name</p>
<p>www.hotelwebsite.com</p>
<p>Hotel description</p>
<p>http://www.hotelwebsite.com/hotelimage.jpg</p>

But I would like to change the element types for each item.

<h2>Hotel Name</h2>
<a href="http://www.hotelwebsite.com">www.hotelwebsite.com</a>
<p>Hotel description</p>
<img src="http://www.hotelwebsite.com/hotelimage.jpg"/>

Is it possible to keep the for loop, but create different elements that I can style differently?

htmlTable.appendChild(tableRow);
for (var i = 0; i < resp.rows.length; i++) {
  var tableRow = document.createElement('div');

  for (var j = 0; j < resp.rows[i].length; j++) {
    var tableData = document.createElement('p');
    var content = document.createTextNode(resp.rows[i][j]);
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
  }

JSFiddle: http://jsfiddle.net/alsjohnstone/LqmgcLa6/8/

Answer 1

Each row has 4 columns (name, website url, description, image url), rather than incrementing through each cell, increment through each row, applying the columns as required.

for (var i = 0; i < resp.columns.length; i++) {        
    var tableHeader = document.createElement('p');
    tableRow.appendChild(tableHeader);
    htmlTable.appendChild(tableRow);
    var tableRow = document.createElement('div');

    var tableData = document.createElement('h2');
    var content = document.createTextNode(resp.rows[i][0]); // hotel name
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
    var tableData = document.createElement('a');
    tableData.setAttribute('src',resp.rows[i][1]); // website
    tableRow.appendChild(tableData);
    var tableHeader = document.createElement('p');
    tableRow.appendChild(tableHeader);
    var content = document.createTextNode(resp.rows[i][2]); // hotel description
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
    var tableData = document.createElement('img');
    tableData.setAttribute('src',resp.rows[i][3]); // website
    tableRow.appendChild(tableData);
    htmlTable.appendChild(tableRow);
}
result.appendChild(htmlTable);

proof of concept fiddle

code snippet:

function dataHandler(resp) {
    console.log(resp);
    
    var result = document.getElementById('result');
    var htmlTable = document.createElement('div');
    
    var tableRow = document.createElement('div');
    for (var i = 0; i < resp.columns.length; i++) {        
        var tableHeader = document.createElement('p');
        tableRow.appendChild(tableHeader);
        htmlTable.appendChild(tableRow);
        var tableRow = document.createElement('div');

        var tableData = document.createElement('h2');
        var content = document.createTextNode(resp.rows[i][0]); // hotel name
        tableData.appendChild(content);
        tableRow.appendChild(tableData);
        var tableData = document.createElement('a');
        tableData.setAttribute('src',resp.rows[i][1]); // website
        tableRow.appendChild(tableData);
        var tableHeader = document.createElement('p');
        tableRow.appendChild(tableHeader);
        var content = document.createTextNode(resp.rows[i][2]); // hotel description
        tableData.appendChild(content);
        tableRow.appendChild(tableData);
        var tableData = document.createElement('img');
        tableData.setAttribute('src',resp.rows[i][3]); // website
        tableRow.appendChild(tableData);
        htmlTable.appendChild(tableRow);
    }
    result.appendChild(htmlTable);
}

function getData() {
    
    // Builds a Fusion Tables SQL query and hands the result to  dataHandler
    var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
    var queryUrlTail = '&key=AIzaSyCMILeBTrsiwVnO9_SSJ4HYtzZl14dXdRA';
    var tableId = '1_wBUixHJqO_W95zMHk_eP8wQKBuXvHEfvNgfTBSC';

    // write your SQL as normal, then encode it
    var query = "SELECT 'Name', 'URL', 'Description', 'Image' FROM " + tableId + " ORDER BY ST_DISTANCE(Postcode, LATLNG(50.879311, 0.063803)) LIMIT 100; "
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, dataHandler, "jsonp");
}

getData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>