JavaScript和JSON：在不同的表中输出不同的值

I'm getting JSON data from a file, and then trying to display the values from one name in one table and the values from another name in another table, but all the data is in both tables.

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

I cannot figure out how to isolate the values from one name and another in each table.

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

Here is my 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>"}

Here is my JavaScript (in header):

这是我的JavaScript(在标题中):

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

Here are my Tables:

这是我的表格:

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

and:

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

Small Update: I have changed my 'table' ID's to be unique. Code updated above.

小更新:我已将我的'表'ID更改为唯一。代码更新如上。

1 个解决方案

#1

There are two things.

有两件事。

First, like Tibo said, you should reference each table uniquely. The selector $('table') means it will add the current TR to any table on your site. Give an id to each table (like you have in the first case, 3d), and then select it directly.

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

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

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

Then you should also check if the attribute key exists in the current record. Like this:

然后,您还应检查当前记录中是否存在属性键。像这样:

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

If launch_anim_link does not exist it will skip it.

如果launch_anim_link不存在,它将跳过它。

The same for the other table, but with launch_3d_link instead and selecting the proper table $('#3d table').append(tr).

对于另一个表也是如此,但是使用launch_3d_link并选择正确的表$('#3d table')。append(tr)。

#1