Question

我有2个JSON文件，当我点击按钮时应该更改页面数据。有人可以帮我确定如何实现这个目标吗？

这是我的JSON文件（第二个是这种格式，内容相同）：

{
    "ranking": "National Universities",
    "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.",
    "badge": "/img/national-universities-badge.svg",
    "rankings": [
        {
            "rank": 1,
            "institution": "Princeton University",
            "location": "Princeton, NJ"
        },
        {
            "rank": 2,
            "institution": "Harvard University",
            "location": "Cambridge, MA"
        },
        {
            "rank": 3,
            "institution": "University of Chicago (tie)",
            "location": "Chicago, IL"
        }
    ]
}

这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Webpack App</title>

        <script>

        $(document).ready(function() {

            var compute = function() {

                $.getJSON("C:\Users\rohit\Downloads\fed-assessment\fed-assessment\src\data\data-1.json" , function(data1) {
                    document.getElementById("ranking").innerHTML = data1.ranking;
                    document.getElementById("description").innerHTML = data1.description;
                    document.getElementById("badge").innerHTML = data1.badge;
                    };

                });



        });

        </script>

    </head>
    <body>
        <div id="content"></div>

        <div class="">
    <div class="">
        <h2 id="ranking"></h2>
        <p id="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing
            elit. Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum
            temporibus.
        </p>
        <div class="">
            <div>
                <img class="badge" src="/img/national-universities-badge.svg" alt="">
            </div>
            <div class="">
                <ul>
                    <li class="">
                        <strong>#1</strong>
                        <div class="">
                            <a href="">Name of college</a>
                            <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div>
                        </div>
                    </li>
                    <li class="">
                        <strong>#2</strong>
                        <div class="">
                            <a href="">Name of college</a>
                            <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div>
                        </div>
                    </li>
                    <li class="">
                        <strong>#3</strong>
                        <div class="">
                            <a href="">Name of college</a>
                            <div><strong>Location:</strong> Lorem ipsum dolor sit amet</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="dummyAd">
        <img class="add" height="250px" width="300px" src="http://placehold.it/600x500?text=dummy+ad">
    </div>
</div>
        <button id="button" onclick="compute()">Toggle Ranking List</button>
        <script src="bundle.js"></script>
    </body>
</html>

Answer 1

正如Mamdouh上面所说的那样。测试无需从文件加载即可工作。你也没有身份证（它被设置为一个班级）所以

document.getElementById（“badge”）。innerHTML = data1.badge

不起作用。

var data1 = { "ranking": "National Universities", "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.", "badge": "/img/national-universities-badge.svg", "rankings":
[ { "rank": 1, "institution": "Princeton University", "location": "Princeton, NJ" }, { "rank": 2, "institution": "Harvard University", "location": "Cambridge, MA" }, { "rank": 3, "institution": "University of Chicago (tie)", "location": "Chicago, IL"
} ] }; 

document.getElementById("ranking").innerHTML = data1.ranking; document.getElementById("description").innerHTML = data1.description; document.getElementById("badge").innerHTML = data1.badge;

<h2 id="ranking"></h2 >
<p id = "description">
   Lorem ipsum dolor sit amet, consectetur adipisicing
   elit.Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum
   temporibus. 
</p>

<div id="badge"></div>

Answer 2

您的代码：

需要进行一些更正

RealmRefresh不使用本地JSON文件，因为它只使用协议。

如果使用$.getJSON文件

XMLHttpRequest无法加载file：/// C：\ Users \ rohit \ Downloads \ fed-assessment \ fed-assessment \ src \ data \ data-1.json。 Access-Control-Allow-Origin不允许使用null。

参考：JQuery $.getJSON load local JSON file not working

您将徽章定义为local JSON而不是class。因此，正确的语法将是

id

然后此声明<img id="badge" src="/img/national-universities-badge.svg" alt="">将起作用。

工作演示：

document.getElementById("badge").src = data1.badge;

var data = {
    "ranking": "National Universities",
    "description": "Schools in the National Universities category offer a full range of undergraduate majors, plus master's and Ph.D. programs.",
    "badge": "/img/international-universities-badge.svg",
    "rankings": [
        {
            "rank": 1,
            "institution": "Princeton University",
            "location": "Princeton, NJ"
        },
        {
            "rank": 2,
            "institution": "Harvard University",
            "location": "Cambridge, MA"
        },
        {
            "rank": 3,
            "institution": "University of Chicago (tie)",
            "location": "Chicago, IL"
        }
    ]
}

function toggleData() {
  document.getElementById("ranking").innerHTML = data.ranking; 
  document.getElementById("description").innerHTML = data.description; 
  document.getElementById("badge").src = data.badge;
  }

如何让我的JSON数据出现在我的HTML页面中？

2 个答案: