Question

我从文件中获取JSON数据，然后尝试显示一个表中一个名称的值和另一个表中另一个名称的值，但所有数据都在两个表中。

我无法弄清楚如何在每个表中隔离一个名称和另一个名称的值。

这是我的JSON：

{"launch_3d_link":"<a href='content/3d/speedswing1.html' target='ifrm'>Speed Swing 1</a>"},
{"launch_3d_link":"<a href='content/3d/speedswing2.html' target='ifrm'>Speed Swing 2</a>"},
{"launch_3d_link":"<a href='content/3d/speedswing3.html' target='ifrm'>Speed Swing 3</a>"},
{"launch_anim_link":"<a href='content/animated/animated1.html' target='ifrm'>Animated 1</a>"},
{"launch_anim_link":"<a href='content/animated/animated2.html' target='ifrm'>Animated 2</a>"},
{"launch_anim_link":"<a href='content/animated/animated3.html' target='ifrm'>Animated 3</a>"}

这是我的JavaScript（标题中）：

function loadFilesJson(data){
    $.getJSON(url = 'lists/files.json',
    function(data){
        console.log(data);
    });
}

以下是我的表格：

<div id="3d" class="panel">
    <table id="3d" width="100%" style="margin-left:-15px;">
    <script>
        $(document).ready(function() {
            $.getJSON(url,
            function (data) {
                var tr;
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].launch_3d_link + "</td>");
                    $('#3d').append(tr);
                    }
                });
            });
    </script>
    </table>
</div>

和

<div class="panel">
    <table id="anim" width="100%" style="margin-left:-15px;">
    <script>
        $(document).ready(function() {
            $.getJSON(url,
            function (data) {
                var tr;
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].launch_anim_link + "</td>");
                    $('#anim').append(tr);
                    }
                });
            });
    </script>
    </table>
</div>

小更新：我已更改了我的表格＆＃39; ID是独一无二的。代码更新如上。

Answer 1

有两件事。

首先，像Tibo说的那样，你应该唯一地引用每个表。选择器$('table')表示它会将当前TR添加到您网站上的任何表格中。给每个表id（就像你在第一种情况下那样，3d），然后直接选择它。

<div id="3d" class="panel">
   ...
</div>

<div id="anim" class="panel">
   ...
</div>

然后你还应该检查当前记录中是否存在属性键。像这样：

for (var i = 0; i < data.length; i++) {
    if (typeof data[i].launch_anim_link != 'undefined') {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].launch_anim_link + "</td>");
        $('#anim table').append(tr);
    }
}

如果launch_anim_link不存在，则会跳过它。

其他表格相同，但改为使用launch_3d_link并选择正确的表格$('#3d table').append(tr)。

JavaScript和JSON：在不同的表

1 个答案: