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

Question

我正在制作一个网站。它试图显示的是运动队的赛程表。我为每个团队都有一个 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"
},

我似乎无法让它写任何东西。我希望它有开始日期、主题和开始时间。我只是为了让主题工作，这就是为什么它是我的代码中唯一的东西。

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

});