我怎样才能实现这个 JSON 文件？

Question

我有以下代码，但我似乎无法在板上显示数据。 json 文件是在本地添加的，而不是来自 URL。

     <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/scripts.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <h2>Jeopardy!</h2>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="text-center col-md-2 col-md-offset-1"><h4><strong>Category</strong></h4></div>
                    <div class="text-center col-md-2"><h4><strong>Category</strong></h4></div>
                    <div class="text-center col-md-2"><h4><strong>Category</strong></h4></div>
                    <div class="text-center col-md-2"><h4><strong>Category</strong></h4></div>
                    <div class="text-center col-md-2"><h4><strong>Category</strong></h4></div>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-body" id="main-board">
                    <div class="category col-md-2 col-md-offset-1">
                        <div class="well question" data-toggle="modal" data-target="#myModal">100</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">200</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">300</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">400</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">500</div>
                    </div>
                    <div class="category col-md-2">
                        <div class="well question" data-toggle="modal" data-target="#myModal">100</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">200</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">300</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">400</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">500</div>
                    </div>
                    <div class="category col-md-2">
                        <div class="well question" data-toggle="modal" data-target="#myModal">100</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">200</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">300</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">400</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">500</div>
                    </div>
                    <div class="category col-md-2">
                        <div class="well question" data-toggle="modal" data-target="#myModal">100</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">200</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">300</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">400</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">500</div>
                    </div>
                    <div class="category col-md-2">
                        <div class="well question" data-toggle="modal" data-target="#myModal">100</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">200</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">300</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">400</div>
                        <div class="well question" data-toggle="modal" data-target="#myModal">500</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
            <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>
                        <br/>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body"></div>
            </div>
        </div>
    </body>

到目前为止我已经有了这个，但我不知道如何进行。

$(function () {
    $('.question').click(function(){
        $('.modal-title').text('Category');
        $('.modal-body').text('Question');
    });
});

在单独的 board.json 文件中：

var board =
[
    {
        "name":"category1",
        "questions":[
            {
                "value":100,
                "question":"Question 1 in category 1 for 100 points",
                "answers":[
                    {
                        "text":"A",
                        "correct":true
                    },
                    {
                        "text":"B",
                        "correct":false
                    },
                    {
                        "text":"C",
                        "correct":false
                    },
                    {
                        "text":"D",
                        "correct":false
                    }
                ]
            },
            {
                "value":200,
                "question":"Question 2 in category 1 for 200 points",
                "answers":[
                    {
                        "text":"A",
                        "correct":true
                    },
                    {
                        "text":"B",
                        "correct":false
                    },
                    {
                        "text":"C",
                        "correct":false
                    },
                    {
                        "text":"D",
                        "correct":false
                    }
                ]
            },
......

我试过使用 .ajax，但无法显示数据。有人可以帮我指引正确的方向吗？

Answer 1

首先你在 board.json 中定义了一个变量 'board' 你需要将它重命名为 board.js 因为它是一个 JavaScript JSON 对象.
其次，您必须在 HTML 头部包含 board.js，这样脚本才能识别该文件。
第三，你必须删除手动添加的类别和问题，并根据提供的board.js

下面是一个工作示例：

<html>
<head>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script> 
    <script src="js/board.js" type="text/javascript"></script>

    <link rel="stylesheet" href="bootstrap.min.css"/>
</head>
<body>
    <div class="container">
        <h2>Jeopardy!</h2>
        <div class="panel panel-default">
            <div id="headingPanel" class="panel-heading">
                <!-- removed the manual categories to be added Dynamicly from the given JSON Object -->    
            </div>
            <div class="panel-body" id="main-board">
                <!-- removed the manual questions to be added Dynamicly from the given JSON Object -->    
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <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>
                    <br/>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body"></div>
            </div>
        </div>
</body>

脚本文件将是这样的：

$(function () {

//first build the heading category titles 
board.forEach(function (currentCat) {
    $("#headingPanel").append('<div class="text-center col-md-2 col-md-offset-1"><h4><strong>' + currentCat.name + '</strong></h4></div>');
});

$("#headingPanel").append('<div class="clearfix"></div>');


//second we build the questions 
board.forEach(function (currentCat) {
    //let's get all the questions for the current Category : 
    var allQuestions = $('<div class="category col-md-2 col-md-offset-1">');  //create the category panel for questions
    currentCat.questions.forEach(function (currentQuest) {
        var question = $(
                '<div class="well question" data-toggle="modal" data-target="#myModal" questionCategory="' + currentCat.name + '" questionData="' + currentQuest.question + '">' + currentQuest.value + '</div>');
        allQuestions.append(question); //append each single question to the questions panel 
    });

    $("#main-board").append(allQuestions);  //append the category panel for questions to the main board 
});


//move this function to the end of the build, so the click trigger can be applied ..
$('.question').click(function (event) { //pass the event param,  in order to get the specific question data to be displayed 
    $('.modal-title').text(event.target.attributes.questionCategory.value); // set the clicked question Category  to the model display
    $('.modal-body').text(event.target.attributes.questionData.value); // set the clicked question data to the model display
});

});

这是一个 board.js 样本：

var board =
    [
    {
    "name":"category1",
            "questions":[
            {
            "value":100,
                    "question":"Question 1 in category 1 for 100 points",
                    "answers":[
                    {
                    "text":"A",
                            "correct":true
                    },
                    {
                    "text":"B",
                            "correct":false
                    },
                    {
                    "text":"C",
                            "correct":false
                    },
                    {
                    "text":"D",
                            "correct":false
                    }
                    ]
            },
            {
            "value":200,
                    "question":"Question 2 in category 1 for 200 points",
                    "answers":[
                    {
                    "text":"A",
                            "correct":true
                    },
                    {
                    "text":"B",
                            "correct":false
                    },
                    {
                    "text":"C",
                            "correct":false
                    },
                    {
                    "text":"D",
                            "correct":false
                    }
                    ]
            }
            ]
            },
            {
            "name":"category2",
                    "questions":[
                    {
                    "value":100,
                            "question":"Question 1 in category 2 for 100 points",
                            "answers":[
                            {
                            "text":"A",
                                    "correct":true
                            },
                            {
                            "text":"B",
                                    "correct":false
                            },
                            {
                            "text":"C",
                                    "correct":false
                            },
                            {
                            "text":"D",
                                    "correct":false
                            }
                            ]
                    },
                    {
                    "value":200,
                            "question":"Question 2 in category 2 for 200 points",
                            "answers":[
                            {
                            "text":"A",
                                    "correct":true
                            },
                            {
                            "text":"B",
                                    "correct":false
                            },
                            {
                            "text":"C",
                                    "correct":false
                            },
                            {
                            "text":"D",
                                    "correct":false
                            }
                            ]
                    }
                    ]
                    }
    ];

这是工作示例的屏幕截图：

希望这对您有所帮助:)

我怎样才能实现这个 JSON 文件？

How can I implement this JSON file?

json

bootstrap-modal