CODEWITHSUNDEEP
javascript
pp94
pp94

Reputation: 133

Creating tables in Javascript

I have a problem. I'm studying javascript but I have no idea how to create tables working only on javascript files. I have to create a table for each output of letter frequency but I have no idea how to do it. Here is the output I should have to have:

output of the exercise

At the beginning I thought to work on the HTML but I can't as that part is related to test my code has to pass. Here I will show some of them:

display_letter_frequency(letter_frequency("Hello"),document.getElementById("frequency_table"));
    var rows = document.getElementById("frequency_table").querySelectorAll('tr')
    equal(rows.length, 4, "With input String 'Hello' there should be 4 table rows")
    equal(rows[0].querySelectorAll('td')[0].innerHTML, 'H', "1st td of 1st tr should have the value H");
    equal(rows[0].querySelectorAll('td')[1].innerHTML, '1', "2nd td of 1st tr should have the value 1");
    equal(rows[1].querySelectorAll('td')[0].innerHTML, 'E', "1st td of 2nd tr should have the value E");
    equal(rows[1].querySelectorAll('td')[1].innerHTML, '1', "2nd td of 2nd tr should have the value 1");
    equal(rows[2].querySelectorAll('td')[0].innerHTML, 'L', "1st td of 3rd tr should have the value L");
    equal(rows[2].querySelectorAll('td')[1].innerHTML, '2', "2nd td of 3rd tr should have the value 2");
    equal(rows[3].querySelectorAll('td')[0].innerHTML, 'O', "1st td of 4th tr should have the value O");
    equal(rows[3].querySelectorAll('td')[1].innerHTML, '1', "2nd td of 4th tr should have the value 1");

Also I cannot use the console.log but write just the code of the function that will be called back by the tester. Here is what I did but I don't know if it's right and how to go forward:

function display_letter_frequency(a,dom) {
if(a === undefined){
    return undefined
} else {
    var tbl     = document.createElement("table");
    var tblBody = document.createElement("tbody");
    for(var x in a){
        var row = document.createElement("tr");

        }
    }
}

This code is related to a function I wrote before which count in command line the frequency letters of the user:

function letter_frequency(s) {
if(s === undefined){
    return undefined
} else {
    var freq = {};
    for (var i = 0; i < s.length; i++) {
        var character = s.charAt(i).toUpperCase();
        if (freq[character]) {
            freq[character]++;
        } else {
            freq[character] = 1;
        }
    }
}
    return freq;
}

Hope that the problem is clear and you can help me and the people who will need it. I looked around the web and they talks about some frequency table to define my problem. I don't know if t's right

Upvotes: 2

Views: 524

Answers (2)

Sumeet Patil
Sumeet Patil

Reputation: 432

Check this - > http://jsfiddle.net/sumeetp1991/tqdxjk0d/1/

/* javascript */
var my_val = "asdasd";
var obj = getFrequency(my_val);

var table = document.createElement("table");

Object.keys(obj).forEach(function(key) {
    var tr = document.createElement("tr");

    var td_key = document.createElement("td");
    var txt_key = document.createTextNode(key);
    td_key.appendChild(txt_key);

    var td_val = document.createElement("td");
    var txt_val = document.createTextNode(obj[key]);
    td_val.appendChild(txt_val);
    tr.appendChild(td_key);
    tr.appendChild(td_val);
    table.appendChild(tr);
});

document.getElementById("table").appendChild(table);





function getFrequency(string) {
    var freq = {};
    for (var i=0; i<string.length;i++) {
        var character = string.charAt(i);
        if (freq[character]) {
           freq[character]++;
        } else {
           freq[character] = 1;
        }
    }

    return freq;
}




   /* html */
<div id="table">
</div>


/* CSS */
td
{
    border: 1px solid black;
}

Upvotes: 0

laruiss
laruiss

Reputation: 3816

Try

for(var x in a){
        var row = document.createElement("tr");
        letterCell = document.createElement('td');
        freqCell = document.createElement('td');
        letterCell.innerHTML = x;
        freqCell.innerHTML = a[x];
        row.appendChild(letterCell);
        row.appendChild(freqCell);
        tblBody.appendChild(row);
    }
}

(Not tested)

Upvotes: 1

Related Questions