Javascipt array of emails , showing it in HTML table

Question

1.00/5 (1 vote)

See more:

You are given an array of12 email ids.
INPUT :

JavaScript

// Here is the array containing all email ids.
var emailIds = [ "albert.eisntein@gmail.com", "leonardo_da_vinci@hotmail.com",
"jagadish_chandra_bose@yahoo.com", "alan_turing@yahoo.com", "srinivasa.ramanujan@gmail.com",
"bjarne_stroustrup@yahoo.com", "max.planck@gmail.com", "nikola.tesla@hotmail.com",
"galileo_galilei@hotmail.com", "a.p.j.abdul.kalam@gmail.com", "richard.stallman@inbox.com", "devin.guffy@yandex.com"];

parse the given array (using only plain JavaScript ) and create an HTML table with 4 columns
as shown below:

a. Gmail - containing all email ids with domain gmail.com.
b. Hotmail - containing all email ids with domain hotmail.com.
c. Yahoo - containing all email ids with domain yahoo.com.
d. Others - containing all email ids with domains not in a,b, and c, i.e., NOT gmail, hotmail and
yahoo.

What I have tried:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <table id="table" border="1" >


            <tr>
                <th>Gmail</th>
                <th>Hotmail</th>
                <th>Yahoo</th>
                <th>Others</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <script>
        var emailIds = [ "albert.eisntein@gmail.com", "leonardo_da_vinci@hotmail.com",
        "jagadish_chandra_bose@yahoo.com", "alan_turing@yahoo.com", "srinivasa.ramanujan@gmail.com",
        "bjarne_stroustrup@yahoo.com", "max.planck@gmail.com", "nikola.tesla@hotmail.com",
        "galileo_galilei@hotmail.com", "a.p.j.abdul.kalam@gmail.com", "richard.stallman@inbox.com",
        "john_von_neumann@mail.com", "c_v_raman@yahoo.com", "isaac.newton@yandex.com",
        "s_chandrashekar@hotmail.com", "james_gosling@shortmail.com", "ken.thompson@gmail.com",
        "stephen_hawking@rediffmail.com", "marie_curie@yahoo.com", "michael.faraday@hotmail.com",
        "charles.babbage@hotmail.com" ];

      var  table=document.getElementById("table");
        for(var i=1;i<table.rows.length;i++){
            
           table.rows[i].innerHTML=emailIds[i-1];
            
            
        }
        
        </script>

    </body>
</html>

Posted 11-Apr-18 7:31am

Member 12452277

Updated 11-Apr-18 22:42pm

Wendelius

v2

Add a Solution

Comments

Patrice T 11-Apr-18 14:15pm

Yes, and you probably have a question ?

Member 12452277 11-Apr-18 16:15pm

how do i parse the array and show the emails with their respective domains in HTML table with in their corresponding columns

[no name] 11-Apr-18 14:55pm

You forget to ask your question. Did you tried to debug your code to see the issue?

Member 12452277 11-Apr-18 16:14pm

i tried but i am stuck up with the logic

F-ES Sitecore 12-Apr-18 4:32am

No-one is going to do your homework for you. If I was you I'd create 4 arrays, one for each email type. Look through all the items in your emailIds array and depending on the domain used (use indexOf or regex to work out the domain) put the address into the correct array. Once you've done that you'll have five arrays in total, the original array and an array per domain.

Next create a table using that data, you can easily google how to create a table using javascript and you can convert the array into a single piece of text to show in the table using "join".

Please don't ask for me to write the code for you, as I said we're not a homework service.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 12452277 · Answer 1 · 2018-04-11T22:43:00

<html>
    <head>
        <title>array </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id ="email_table"></div>
        <script>
            var myTableDiv = document.getElementById("email_table");
            var table = document.createElement('TABLE');
            var tableBody = document.createElement('TBODY');

            table.border = '1';
            table.appendChild(tableBody);

            var heading = [];
            heading[0] = "Gmail";
            heading[1] = "Hotmail";
            heading[2] = "Yahoo";
            heading[3] = "Other's";
            var tr = document.createElement('TR');
            tableBody.appendChild(tr);
            for (i = 0; i < heading.length; i++) {
                var th = document.createElement('TH');
                th.style.color="red";
                th.width="100";
                th.appendChild(document.createTextNode(heading[i]));
                tr.appendChild(th);
            }
            var emailIds = ["albert.eisntein@gmail.com", "leonardo_da_vinci@hotmail.com",
                "jagadish_chandra_bose@yahoo.com", "alan_turing@yahoo.com",
                "srinivasa.ramanujan@gmail.com", "bjarne_stroustrup@yahoo.com",
                "max.planck@gmail.com", "nikola.tesla@hotmail.com", 
                "galileo_galilei@hotmail.com", "a.p.j.abdul.kalam@gmail.com", 
                "richard.stallman@inbox.com", "john_von_neumann@mail.com",
                "c_v_raman@yahoo.com", "isaac.newton@yandex.com", 
                "s_chandrashekar@hotmail.com", "james_gosling@shortmail.com", 
                "ken.thompson@gmail.com", "stephen_hawking@rediffmail.com", 
                "marie_curie@yahoo.com", "michael.faraday@hotmail.com", 
                "charles.babbage@hotmail.com"];
            
            var count_gmail = 0;
            var count_hotmail = 0;
            var count_yahoo = 0;
            var count_others = 0;
            for (i = 0; i < emailIds.length; i++) {
                if (emailIds[i].indexOf("gmail") >= 0) {
                    count_gmail++;
                } else if (emailIds[i].indexOf("hotmail") >= 0) {
                    count_hotmail++;
                } else if (emailIds[i].indexOf("yahoo") >= 0) {
                    count_yahoo++;
                } else {
                    count_others++;
                }
            }
            var maxRow = Math.max(count_gmail, Math.max(count_hotmail, Math.max(count_yahoo, count_others)));
            for (i = 0; i < 6; i++) {
                var tr = document.createElement('TR');
                for (j = 0; j < 4; j++) {
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode(" "));
                    tr.appendChild(td);
                }
                tableBody.appendChild(tr);
            }
            var row_gmail = 1;
            var row_hotmail = 1;
            var row_yahoo = 1;
            var row_others = 1;
            for (i = 0; i < emailIds.length; i++) {
                if (emailIds[i].indexOf("gmail") >= 0) {
                    table.rows[row_gmail++].cells[0].innerHTML = emailIds[i];
                } else if (emailIds[i].indexOf("hotmail") >= 0) {
                    table.rows[row_hotmail++].cells[1].innerHTML = emailIds[i];
                } else if (emailIds[i].indexOf("yahoo") >= 0) {
                    table.rows[row_yahoo++].cells[2].innerHTML = emailIds[i];
                } else {
                    table.rows[row_others++].cells[3].innerHTML = emailIds[i];
                }
            }
            myTableDiv.appendChild(table);
        </script>

    </body>

</html>