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.

Where is the JSON coming from? Are you loading it via AJAX or hard coding it into the page? — James Duffy, May 02 '14 at 15:23
I might have understood. Do you want the user to fill in the forms and then send that information somewhere as JSON? Or do you want to load in JSON data and use it to populate a table? — James Duffy, May 02 '14 at 15:26
@JamesDuffy I want to fill all those inputs, automatically over night, NO user sitting there, I just want to pass them some random variables using Json. is that more clear? and then javascript push that button automatically to submit the fake data that I am providing using Json — benji_r, May 02 '14 at 15:31
You're trying to automate a repetitive form submission? Are you submitting the data to the same domain where your script is hosted or another server? — James Duffy, May 02 '14 at 15:49
@JamesDuffy yes repetitive submission on same server, using my random inputs that I have in json — benji_r, May 02 '14 at 15:52

score 1 · Accepted Answer · answered May 02 '14 at 16:30

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).

This is exactly what I am looking for, is it possible to make a loop so everytime this finish is all the filterlist starts all over again? and do it till I stop it ? — benji_r, May 02 '14 at 16:34
You want it to submit the same data over and over? Yes, in that case simply change the first few lines of the `setInterval` function to: `if (i === filterList.length) { i = 0; }`. — James Duffy, May 02 '14 at 16:37
Thank you so much James, its perfect, so how does the var fillForm = function (obj) { $.each(obj, function (key, val) { $("#search" + key).val(val); }); }; works? how does it know how to match each field with those variables? — benji_r, May 02 '14 at 16:42
https://api.jquery.com/jQuery.each/ `$.each()` takes each key/value pair in the javascript object and does something to them. In our case the keys, like `PersonFName`, can be consistently mapped to the JQuery id selectors by adding "search" to the beginning. I.e. `PersonFName` => `$("#searchPersonFName")`. — James Duffy, May 03 '14 at 00:14

Jordan.J.D · Answer 2 · 2014-05-02T15:47:55.830

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

hi JordanD, thanks for the answer, can you tell me what exactly this do? I am pretty new to these things. — benji_r, May 02 '14 at 15:43
I want to fill all those inputs, automatically over night, NO user sitting there, I just want to pass them some random variables using Json. is that more clear? and then javascript push that button automatically to submit the fake data that I am providing using Json — benji_r, May 02 '14 at 15:43
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 — Jordan.J.D, May 02 '14 at 15:50

Patrick Pease · Answer 3 · 2014-05-02T23:32:00.680

0

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.

edited May 02 '14 at 23:32

answered May 02 '14 at 16:04

Patrick Pease

179
1
8

This is exactly what I am looking for but how do I make it so the javascript select the submit button every few seconds and submit all those information for 24 hours while I will be monitoring the server responds time – benji_r May 02 '14 at 16:07
and i will have 10 different company1Filter with different data that has to be entered there, so I guess I need a for loop – benji_r May 02 '14 at 16:19
I charge by the hour buddy :D - but you would create your submit function, wrap it in a set_interval() ala http://stackoverflow.com/questions/3138756/jquery-repeat-function-every-60-seconds and do your server side processing in the language of your choice. some handy references include http://www.tutorialspoint.com/javascript/, https://learn.jquery.com/, and http://www.google.com/ – Patrick Pease May 02 '14 at 23:30
... Tell me what problem you're trying to solve with this little script? I see that you want to auto-populate the table, and I see that you want to auto-submit the table but I don't really understand the problem that this solves. If I knew that I might be able to offer more/better advice. – Patrick Pease May 02 '14 at 23:38
I pretty much want to test the server responds time for every search I am doing in millisecond. when data is a lot responds time changes as well too. Doing this I can run it with sample data for 24 hours and see how light this search engine is . I am doing it in Apex, using Salesforce – benji_r May 03 '14 at 16:17

Automatic fill a table with data using JavaScript and JSON

3 Answers3

Linked