JSON对象（被循环查询数据）不返回数据但显示记录被发现

Question

所以这里给你一个奇怪的...

正如您在下面看到的，我创建了将内容注入模式（使用 Bootstrap）的代码，该模式来自本地 JSON 对象并依赖于已单击的按钮。

但是，应该注入的内容并没有被注入！尽管如此，我确实知道 if 语句在其中一个循环上满足它的条件，这要归功于我的 console.log 命令点缀在这个地方，特别是在循环和 if 函数中（也在循环内）。

附图显示了工作中的控制台日志和模式。（红色文字合成在屏幕截图上，不是现场的；））

这是 Javascript (navigation.js)：

$('#projectModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget); // Define Button which triggered Modal
    var inputTitle = button.data('title'); // Extract data-title attribute value
    console.log(inputTitle);

    // Generate JSON Database
    var json = [{prTitle:"Forever Fitness Gibraltar", prDescription:"This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today.", prClient:"Tonu Osa", prWorkers:"Anton Brink, Paula Osa", prLocation:"Tallinn, Estonia", prDuration:"4 Weeks"},
            {prTitle:"The Spy Program", prDescription:"This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today.", prClient:"Skye", prWorkers:"Anton Brink, Paula Osa", prLocation:"London, England", prDuration:"2 Weeks"},
            {prTitle:"Leeds Fest", prDescription:"This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today.", prClient:"Leeds Dude", prWorkers:"Anton Brink, Paula Osa, Oliver Brink", prLocation:"Leeds, England", prDuration:"1 Week"}
        ];

    // For Testing Purposes only, the loop is not currently declaring any values from the JSON database -.-
    var description = 'This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today.';
    var client = 'Skye';
    var workers = 'Anton Brink, Paula Osa';
    var location = 'London, England';
    var duration = '2 Weeks';

    // Loop to Find JSON data corresponding to data-title
    $.each(json, function(n, v) {
        console.log('In');
        if(v.prTitle == inputTitle) {
            console.log('Looping');
            var description = v.prDescription;
            var client = v.prClient;
            var workers = v.prWorkers;
            var location = v.prLocation;
            var duration = v.prDuration;
            return;
        }
    });

    console.log(description);
    console.log(client);
    console.log(workers);
    console.log(location);
    console.log(duration);

    var modal = $(this);

    // Inject relevant JSON data into Modal Contents
    modal.find('.modal-title').text(inputTitle); // Inject Title directly from inputTitle attribute
    modal.find('#projectModalDescription').text(description);
    modal.find('#projectModalDetailsClient').text(client);
    modal.find('#projectModalDetailsWorkers').text(workers);
    modal.find('#projectModalDetailsLocation').text(location);
    modal.find('#projectModalDetailsDuration').text(duration);

});

这是模态的 HTML：

<div id="projectModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 id="exampleModalLabel" class="modal-title">Awesome Project!</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-9">
                        <p id="projectModalDescription">
                            Nothing in here yet, stupid JSON Object... WORK!
                            <br />
                            Signed,
                            <br />
                            Mech
                        </p>
                    </div><!-- .col-* -->
                    <div class="col-sm-3">
                        <h5 id="projectModalDetailsHeader">The Specs</h5>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <h6 class="list-group-item-heading">Client</h6>
                                <p id="projectModalDetailsClient" class="list-group-item-text">Nothing</p>
                            </li>
                            <li class="list-group-item">
                                <h6 class="list-group-item-heading">Project Mates</h6>
                                <p id="projectModalDetailsWorkers" class="list-group-item-text">In</p>
                            </li>
                            <li class="list-group-item">
                                <h6 class="list-group-item-heading">Location</h6>
                                <p id="projectModalDetailsLocation" class="list-group-item-text">Here</p>
                            </li>
                            <li class="list-group-item">
                                <h6 class="list-group-item-heading">Duration</h6>
                                <p id="projectModalDetailsDuration" class="list-group-item-text">Yet -.-</p>
                            </li>
                        </ul>
                    </div><!-- .col-* -->
                </div><!-- .row -->
            </div><!-- .modal-body -->
        </div><!-- .modal-content -->
    </div><!-- .modal-dialog -->
</div><!-- #projectModal -->

对于按钮：

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#projectModal" data-title="Forever Fitness Gibraltar">Click me!</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#projectModal" data-title="The Spy Program">Click me!</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#projectModal" data-title="Leeds Fest">Click me!</button>

Answer 1

如果没有看到您的数据结构，很难提供完整的解决方案。

但是您的 each 循环不正确。您在该循环中声明了在回调之外无法访问的局部变量。

此外，循环的每次迭代都会覆盖这些变量

var description = "Original";

$.each(json, function(n, v) {
       // this is different variable than the one above
       var description = "New Description";
});
console.log(description)// "Original"

使用上面循环中的变量（仍然只会得到最后一次迭代的值）

$.each(json, function(n, v) {
       // this is same variable as above
        description = "New Description";
});
console.log(description)// "New Description"

需要更多地了解数据或循环的原因以提供更多帮助