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.

From what I can tell you are asking someone to write the Javascript code for you? This isn't a code writing service so please make an attempt and post that code. Then someone may be able to help you. — Fencer04
– Fencer04, Commented Aug 31, 2016 at 17:05
Since I not good in javascript/jquery function and lot of tip-trick not on my pocket, maybe I need some idea before my head start thinking straight. <br> Anyway #Frencer04 you are absolute right and I must thanks to you and DaniP because of u 2, I have my own anwser like below for who using this code and face a same problem. <br> Thanks your all. — ahadeveloper777
– ahadeveloper777, Commented Aug 31, 2016 at 18:22

DaniP · Accepted Answer · 2016-08-31 16:08:41Z

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>

ahadeveloper777 · Accepted Answer · 2016-08-31 18:56:34Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related