How to Create Dynamic Object HTML and Assign Attribute Based Data Given

Question

I have dynamic object (button and textbox) create by jquery where each time I press Add Transport. I took this code from this forum and modify little bit to suit my situtions (thanks to whom create this code).

Let me detail first regarding my dynamic items:

My set of group data are Trip[], Bus No[] and Amount[] . This set can be multiple but consistent with 3 items only each group.

trip[] = button object
busno[] = text object
amount = text object

Below are my HTML script:

    <div class="purchase-items-fieldset" style="clear:both;">
        <div class="purchase-items-wrapper">
            <div class="purchase-items">                            
                        <ul>
                        <li>
                        <input type="button" name="trip[]" value="PB" class="field btn-field">
                        </li>
                        <li>
                        <input type="text" name="busno[]" class="field txt-field">
                        </li>
                        <li>
                        <input type="text" name="amount[]" class="field txt-field">
                        </li>
                        </ul>
                <input type="button" class="remove-line btn-remove" style="border:solid">
            </div>
        </div>
        <button type="button" id="btnAddTrans" class="add-field" style="display: none">Add field</button>
    </div>

Let says I have 2 set group data like below ***(mydata="PB,WBX001,1000,P,WBK001,500")***

Then, my plan is:-

Group 1
trip[]=PB
busno[]=WBX001
amount[]=1000

Group 2 
trip[]=P
busno[]=WBK001
amount[]=500 

where I want Jquery/Javascript create 2 group dynamic object and assign value each object base on plan above :-

function assigndatatrip (mydata) {
        //mydata="PB,WBX001,1000,P,WBK001,500"
        //each 3 item are 1 set group data etc: PB,WBX001,500

        //do split function and count how many set group
                 // create dynamic object
                 // assign data for dynamic object
        //loop
        //else no more data to assign then exit-return             
    }

I no idea where to start because I not so good on javascript/jquery function.

I hope anybody who face this problem can share and help me how to solve this problem. Thanks on advance who's reading and reply this question.

Thanks you.

Answer 1

If you will have that structure for your data : "each three items a group" .

Then you can apply this logic:

 $(document).ready(function() { //Initialize vars var start, mydata = ["PB", "WBX001", "1000", "P", "WBK001", "500"] //Loop to create items based on the array amount/3 for (start = 0; start < (mydata.length / 3); start++) { //Target the elements of the array you need for each group var trip = start * 3, busno = trip + 1, amount = trip + 2; //Create the element to append var item = "<div class='item'><ul><li>" + mydata[trip] + "</li><li>" + mydata[busno] + "</li><li>" + mydata[amount] + "</li></ul></div>"; //Append the group element $('body').append(item); } }) 

 .item { color: white; background: purple; margin: 20px auto; padding: 25px; } .item li { list-style: none } 

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

Answer 2

I must thanks to DaniP who have spirit and kindness, helping without asking. Thanks again.

I think and think many time regarding problem above, I can't use DaniP entire solution because I already have function AddTrans, SaveTrans and many more. My critical part only how to display back all a data I already save. Since object are dynamic my head getting sick to think and honestly I really bad on javascript/jquery coding.

Ok. If anybody using Dynamic Object inside Div and already run perfectly but do not know how to display back a data while create dynamic object then please consider my code below are one of solution on your reference.

 function assigndatatrans(mydata) {
    //var mydata = "PB,WBX001,500,P,WBK001,300"
    var gdata = mydata.split(',').length / 3;
    for (start = 0; start < gdata - 1; start++) {
        $('#btnremove').click();
        clickaddtrans();
    }
    var substr = mydata.split(',');
        $.each($('.field'), function (index,value) {
            $(this).val(substr[index]);
        });
}

Let me explain my code for myself (I still on learning process JQuery function):-

First thing first is data string get from database

//var mydata = "PB,WBX001,500,P,WBK001,300"

then I need to count how many group data I have, each 3 item are 1 group then I need do small calculation

var gdata = mydata.split(',').length / 3;

After that, I know I already have function AddTrans and RemoveTrans then I need to clear first my dynamic object and show it again based how many group should be appear:-

for (start = 0; start < gdata - 1; start++) {
        $('#btnremove').click();
        clickaddtrans();
    }

Finally, I learn some function $.each and Index and Value on JQuery recently and I try apply to make sure my data string can be perfectly insert into each field on my dynamic object. I think this part are really tricky for me and I try many time to make it working.

var substr = mydata.split(',');
    $.each($('.field'), function (index,value) {
        $(this).val(substr[index]);
    });

That's all.... Now I can get my output run smoothly and workable. I can't say perfect! because I believe yours all who read this question can do better than this and far far more superior.

Anyway thanks so much and sleep well. :)