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

Trying to call out multiple objects from a JSON array displayed by radio button

本文关键字：调用 对象 数组 JSON 单选按钮 显示      更新时间：2023-09-26

我正在制作一个网站。它试图展示的是运动队的时间表。我为每个团队都有一个JSON文件。我希望能够点击某个团队的单选按钮，让它在另一个分区的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"
},

我似乎什么都写不出来。我希望它有开始日期、主题和开始时间。我只是想让它服从工作，这就是为什么它是我代码中唯一的东西。

实况演示（和此JSON页面示例）

我建议您使用稍微不同的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 );        
    });
});
相关文章：