Automatic fill a table with data using JavaScript and JSON

Question

I want to test a my fields in a table over night. I have a table that takes input with a button, and I want to pass all the variables using JSON. Here is the sample of what I have. I Googled but wasn't getting what I was looking for.

<table style="border-style:solid;display: inline-block; " >
    <tr>
        <td>Person First Name</td><td><input type="text" id="searchPersonFName"/></td>
    </tr>
    <tr>
        <td>Person Last Name</td><td><input type="text" id="searchPersonLName"/></td>
    </tr>
    <tr>
        <td>Person Telephone Number</td><td><input type="text" id="searchPersonNumber"/></td>
    </tr>
    <tr>
        <td>Person Company Name</td><td><input type="text" id="searchPersonCompName"/></td>
    </tr>
    <tr>
        <td>Person Fax</td><td><input type="text" id="searchPersonFax"/></td>
    </tr>
    <tr>
        <td>Email Address</td><td><input type="text" id="searchPersonEmail"/></td>
    </tr>
    <tr>
        <td>Prov/State</td><td><input type="text" id="searchPersonProvState"/></td>
    </tr>
    <tr>
        <td>Postal Code</td><td><input type="text" id="searchPersonPostalCode"/></td>
    </tr>
    <tr>
        <td>City</td><td><input type="text" id="searchPersonCity"/></td>
    </tr>
    <tr>
        <td>Country</td><td><input type="text" id="searchPersonCountry"/></td>
    </tr>
</table>
<input type="button" id="btnSearchPerson" onclick="searchPerson();" value="Search Person" />

I basically want this button to be pushed the for a long time, and fill up all those filled using this:

var filterList = new Array();

        var company1Filter = {
            PersonFName :  ''
            PersonLName : '',
            etc..
        }
        filterList.push(company1Filter);

I'm pretty new to this, if I am missing any information, please let me know as I can explain further.

Answer 1

I assume you want to populate this table with values from valid JSON, the problem is that you provided us with an empty JSON object so I had to guess and improvise in order show how this works.

You haven't defined the searchPerson function at all in the code you provided, allow me to do the work for you :P

function searchPerson() {
    jQuery('#searchPersonFName'   ).val(company1Filter.FName   );
    jQuery('#searchPersonLName'   ).val(company1Filter.LName   );
    jQuery('#searchPersonNumber'  ).val(company1Filter.Number  );
    jQuery('#searchPersonCompName').val(company1Filter.CompName);
    jQuery('#searchPersonFax'     ).val(company1Filter.Fax     );
    //ETC...
}

http://jsfiddle.net/2SMHz/5/ should provide some insight into how you would do this.

Answer 2

I think this is what you're looking for:

Working Fiddle: http://jsfiddle.net/HRyYs/

var INTERVAL = 3000; // submission will fire every xxxx milliseconds

function searchPerson() {
    // not sure what you want to happen here, or if this is already defined in your code or what... 
}

// fill this JSON object with all your data
var filterList = [{
    PersonFName: 'Steve',
    PersonLName: 'Stevenson',
    PersonNumber: '123',
    PersonCompName: 'a',
    PersonFax: '456',
    PersonEmail: 'a@a.com',
    PersonProvState: 'NY',
    PersonPostalCode: '123',
    PersonCity: 'NYC',
    PersonCountry: 'USA'
}, {
    PersonFName: "Greg",
    PersonLName: "Gregory"
    // etc...
}];

// fills the form inputs with the values from the JSON
var fillForm = function (obj) {
    $.each(obj, function (key, val) {
        $("#search" + key).val(val);
    });
};

var i = 0;
setInterval(function () {
    if (i === filterList.length) {
        console.log("Done.");
        return;
    }
    $("input").val(""); // clear previous input
    fillForm(filterList[i]);
    searchPerson(); // or $("#btnSearchPerson").click();
    console.log("Submitted. Count: " + i);
    i++;
}, INTERVAL);

Change the INTERVAL to however often you want the submission to fire, in milliseconds. (I set it to 3 seconds).

Answer 3

Via ajax call:

Javascript

 function makeTable(data) {
                var wrapColumn = function(value) {
                    return "<td>" + value + "</td>";
                };

                $("#table tbody").append("<tr><th>header1</th><th>header2</th><th>header3</th></tr>");

                for ( var i = 0; i < data.length; i += 1) {
                    $("#table tbody").append("<tr>" + wrapColumn(data[i].prop1)+ wrapColumn(data[i].prop2)+ wrapColumn(data[i].prop3)+ "</tr>")
                }
}

HTML

     <button type="button" class="btn btn-default" id="button"></button>
                    <div class="table-responsive">

                    <table id="table" class="table table-striped table-hover">

                        <tbody>

                        </tbody>

                    </table>

                </div>

On button click:

        $("#button").click(function() {
                   var json = {};
        makeTable(json);
    })

The javascript function will take your JSON object and put each property into a table, row by row (first fill out headers). The on button click will catch when the user clicks the button and execute the makeTable function. the html is needed to actually have a table and button on your page. Somewhere in there you will need a JSON object