尝试从单选按钮显示的JSON数组中调出多个对象

时间:2013-12-17 03:17:43

标签: javascript jquery json radio

我正在建立一个网站。它试图展示的是运动队的时间表。我为每个团队都有一个JSON文件。我希望能够点击某个团队的单选按钮,让它在另一个div的JSON文件中显示某些信息。

所以我将发布一个团队的例子。 单选按钮:

<tr><td><label>
<input type="radio" name="teamShow" value="cCubs">Chicago Cubs
</label></td></tr>

JQuery:

$("input[name='teamShow']").change(function() {
    selected = $('input[name=teamShow]:checked' ).val();
    console.log(selected);
    if (selected == "cCubs") { 
            $('#markerMessage7').html(
            $.getJSON( "ChicagoCSked.json", function( data ) {
                $.each(data, function(i, entry) {
                    displayData = data.ccJSON.SUBJECT[0];})
            })
            )
        }
    })

身体:

<div id ="markerMessage7">-</div>

JSON(只有一个数组):

ccJSON =[
{
"START_DATE":"02/27/14",
"START_TIME":"02:05 PM",
"START_TIME_ET":"03:05 PM",
"SUBJECT":"D-backs at Cubs",
"LOCATION":"Cubs Park",
"DESCRIPTION":"",
"END_DATE":"02/27/14",
"END_DATE_ET":"02/27/14",
"END_TIME":"05:05 PM",
"END_TIME_ET":"06:05 PM",
"REMINDER_OFF":"FALSE",
"REMINDER_ON":"TRUE",
"REMINDER_DATE":"02/27/14",
"REMINDER_TIME":"01:05 PM",
"REMINDER_TIME_ET":"02:05 PM",
"SHOWTIMEAS_FREE":"FREE",
"SHOWTIMEAS_BUSY":"BUSY"
},

我似乎无法写任何东西。我希望它有开始日期,主题和开始时间。我只是在努力工作,这就是我的代码中唯一的原因。

1 个答案:

答案 0 :(得分:1)

LIVE DEMO and this JSON page example

我建议您使用稍微不同的JSON结构:

{
  "cCubs" : {
    "START_DATE":"02/27/14",
    "START_TIME":"02:05 PM",
    "START_TIME_ET":"03:05 PM",
    "SUBJECT":"D-backs at Cubs",
    "LOCATION":"Cubs Park"
  },
  "Something" : {
    "START_DATE":"02/29/14",
    "START_TIME":"04:00 PM",
    "START_TIME_ET":"05:05 PM",
    "SUBJECT":"Something subject",
    "LOCATION":"Something Park"
   }
}

有了这个,您可以使用以下单选按钮:

<label>
    <input type="radio" name="teamShow" value="cCubs">
    Chicago Cubs
</label>
<label>
    <input type="radio" name="teamShow" value="Something">
    Something
</label> 

这个琐碎的JS:

$("input[name='teamShow']").change(function() {

    var selected = $('input[name=teamShow]:checked').val();
    var displayData = "";

    $.getJSON( "allTeamsData.json", function( data ) {        
        displayData = data[selected].SUBJECT;
        $('#markerMessage7').html( displayData );        
    });

});