如何根据从json数组接收的动态值显示div内容?

时间:2014-10-27 14:15:58

标签: javascript jquery html css json

这里,我需要根据从json数组获得的动态值显示div内容。

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"}

从上面收到的JSON对象,我将值设置为相应的div元素,如下所示。

$('#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 

在这里,如果我在value2transaction数组中有任何值,它应该显示外部div。 否则,它应该隐藏。

 <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

如何使用jquery实现这一目标?

2 个答案:

答案 0 :(得分:2)

您可以使用Jquery.trim检查内容是否完全为空。试试这个:

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

选中 DemoFiddle

答案 1 :(得分:0)

这就是你要找的东西

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);
}