Append data to div element

Question

3.11/5 (2 votes)

See more:

I have JSON data and I need to show it in a div with some conditions. For example:

function binditem(jsondata)
for (var i = 0; i < jsondata.length; i++) {
var item = jsondata[i];
if (item.chkval == false) {
// add details to divContent
}
if(item.chkval == true){
// add details to divContent
}
}
$("#div").append(divContent);

C#

My problem is I want to list `item.chkval==false` content to `1, 9, 17`th of div in page list(one row contain 3 div) and others binding to remaining portion. How is it possible to do this?

The html look like this

HTML

<div id="div" class"row">
<div class="col-xs-12 col-md-6"> //show itemlchkval==false here</div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-md-6"> //show itemlchkval==false here</div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
<div class="col-xs-12 col-sm-6 col-md-3"></div>
</div>

What I have tried:

I have tried to split json data into two array But how I append to respective position

Posted 11-May-16 4:25am

Dil0500

Updated 20-May-16 9:28am

v3

Add a Solution

Comments

Karthik_Mahalingam 11-May-16 10:28am

post the markup code
Its hard to understand the question.
use Improve question to add more info to it.

Sergey Alexandrovich Kryukov 11-May-16 10:51am

You don't show where divContent comes from.
—SA

Dil0500 12-May-16 4:28am

<div id="div"></div>.the all div append dynamically

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Prateek Dalbehera · Answer 1 · 2016-05-20T09:28:00

Hi,
It was little bit difficult to get your problem initially but after a while what I understood is you have json data and from that you will separate true & false values And append the same to specific positions inside the div element.

As,I am not clear with your requirement, the following solution came to mind. Hope, a better code will be achieved when requirement will be more clear.

Try the code below & reply with your questions...

JavaScript

function binditem(jsondata) {
    var arrFalse = [];
    var arrTrue = [];
    for (var i = 0; i < jsondata.length; i++) {
        var item = jsondata[i];
        if (item.chkval == false) {
            arrFalse.push(item); //insert into false array
        }
        if (item.chkval == true) {
            arrTrue.push(item); //insert into true array
        }
    }
    for (var i = 1; i <= arrFalse.length + arrTrue.length; i++) {
        var countTrue = 0;
        var countFalse = 0;
        if (i == 1 || i == 9 || i == 17)
        {
            $('<div />', {
                "id": 'yourIdFalse',//optional
                "class": 'col-xs-12 col-md-6', //you can provide any other property too
                html: arrFalse[countFalse]
            }).appendTo(parentId);//in your case - "#div"
            countFalse++; //increment to get next value
        }
        else
        {
            $('<div />', {
                "id": 'yourIdTrue',
                "class": 'col-xs-12 col-sm-6 col-md-3',
                html: arrTrue[countTrue] //count variable to append only when true
            }).appendTo(parentId);
            countTrue++; //increment to get next value for the next iteration

        }
    }
}

Thanks,
Prateek