How to create box dynamically and display JSON data from server

Question

I am working on web app and I need to display data coming from the server which is in json format in tiles. I have made group of four tiles which represents one event i.e. each tile represents different parameter of the same event. Now the number of events coming from the server is dynamic as the server keeps updating. So I need to write code for creating this set of four tiles dynamically, so that on click of a button if on server let number of events be 10, I should have 10 set of these four tiles. Also I need to display it on same page so that on swipe(either right or left), I will get one set of event at a time. Here is the part of my code: http://jsfiddle.net/archana85/n6sunk1r/1/

I searched on net I tried with document.createElement. Part of my code is:

$(document).ready(function() {
    $('#milk').click(function() {
        var iCnt = 0;
        // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
        var container = $(document.createElement('div'))
    });
    if (iCnt <= myJSON.length) {
        // ADD BOX.
        $(container).append('<input type=text class="input" id=tb' + iCnt + ' ' + 'value="Text Element ' + iCnt + '" />');

Now I am not getting here how should I add boxes as each box has three different fields and each field have different id's. My code is in javascript and jquery. Thanks in advance.

sorry I not very surely what's your problem is. It's very easy to create a element with jQuery. and use the function like `$.get` to catch the json from server, then you can put the data in your element — chanjianyi, Sep 08 '15 at 06:15
@chanjianyl I have done this part. I am facing problem with creating boxes dynamically. Code for box you can see at http://jsfiddle.net/archana85/n6sunk1r/4/. For each event i need a set of four boxes as I have explained in the question. I am not getting how to create four boxes in a div at a time. — Archana Roy, Sep 08 '15 at 06:19
Actually each data has different parameters and I need to diaplay four of them, so I need four boxes. — Archana Roy, Sep 08 '15 at 06:28
Definetly. Check here http://stackoverflow.com/questions/32217952/access-to-elements-of-json-aray-of-objects/32217971?noredirect=1#comment52319424_32217971 — Archana Roy, Sep 08 '15 at 06:57
I have problem in creating dynamic boxes. I have already displayed one set of event in boxes. — Archana Roy, Sep 08 '15 at 06:59

score 0 · Answer 1 · answered Sep 09 '15 at 07:42

for the "box creation" part, I made this simple example:

$("button").on("click", function () {
    $("#box-container-right").append(
        '<li class="box4">' +
        '<h5 align=left>Temperature<h5>' +
        '<h5 align=center>Value<h5>' +
        '<h6 aligh=right>Celcius<h6>' +
        '</li>');
});

and i have updated your fiddle a bit: http://jsfiddle.net/n6sunk1r/5/

but it seems like your html/css layout is fucked up a bit so adding multiple "boxes" doesn't work that well.

maybe you still got a clue about how you can continue now.

you can then wrap the append() part to your ajax-success or -done callback and fill it up with data.

How to create box dynamically and display JSON data from server

1 Answers1