How to display div content based on dynamic value received from json array?

Question

Here, I need to display div contents based on the dynamic value which I get from json array.

JSON Object

   {"userid":"12345","cmpyname":"stackoverflow",
   "starrays": [{"transaction":"7272785","value2":"GOOGLE"},     //Array [0]
   {"transaction":"85785272","value2":"YAHOO"},                  //Array [1]
   {"transaction":"4774585","value2":"REDIFF"}],                 //Array [2]
   "value3":"95345"}

From the above received JSON object, I am setting the value to the respective div element as like below.

$('#somedivid').html(data.userid);                         //normal json object
$('#somedivid').html(data.starrays[0].value2);             //json array object 
$('#somedivid').html(data.starrays[0].transaction);        //json array object

Here, if I have any values in value2 and transaction array, it should display outer div. Otherwise, it should hide.

 <div id="outer"> 
 <div id="verbiage1" class="ver1">
        Value 2:
    </div>
    <div id="val">
        <!-- dynamic value populate here -->
    </div>
    <div id="verbiage2" class="ver2">
        Transaction:
    </div>
    <div id="amt">
          <!-- dynamic value populate here -->
    </div>
    </div>

JSFIDDLE

How to achieve this using jquery?

I am not entirely sure, but I would try like this: -I would have an 'if' statement to check if we have data (value2 and transaction) and if not I would hide the divs I don't need. I hope this can give you a starting point. — Aessandro
– Aessandro, Commented Oct 27, 2014 at 14:28

DaniP · Accepted Answer · 2014-10-27 15:02:07Z

2

You can check if the content is totally empty with Jquery.trim. Try this:

var val = $.trim($('#val').html()),
    amt = $.trim($('#amt').html());
if(!val && !amt) {
    $('#outer').hide();
    alert('No Value')
}

Check this DemoFiddle

edited Oct 27, 2014 at 15:02

answered Oct 27, 2014 at 14:35

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DKR Over a year ago

your answer is write but only correct this line var val = $.trim($('#val').html());

Amal Hashim · Accepted Answer · 2014-10-27 14:51:29Z

0

Is this what you are looking for

var json = {"userid":"12345","cmpyname":"stackoverflow",
"starrays": [{"transaction":"7272785","value2":"GOOGLE"},     //Array [0]
{"transaction":"85785272","value2":"YAHOO"},                  //Array [1]
{"transaction":"4774585","value2":"REDIFF"}],                 //Array [2]
"value3":"95345"}

if(json["starrays"].length > 0 && (json["starrays"][0].transaction != undefined
                               && json["starrays"][0].value2 != undefined)) {
   $('#outer').show();
   $('#val').html(json["starrays"][0].value2);
   $('#amt').html(json["starrays"][0].transaction);
}

answered Oct 27, 2014 at 14:51

Amal Hashim

5114 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to display div content based on dynamic value received from json array?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related