Question

我现在正在寻找2小时

如何在我的JavaScript文件中读取我的Json数据，将其保存到var中并打印出来。

我无法让它发挥作用..我遇到的每一个解决方案都不适用于我（因为我是一个JS noob）请帮帮我：

我的Json文件：

var Quotes = {
    "allQuotes": [{
        "person": "- Martin Luther King Jr.",
        "quote": "In the End, we will remember not the words of our enemies, but the silence of our friends."

    }, {
        "person": " Uknown",
        "quote": "I am big! It is the pictures that got small."

    }, {
        "person": "- Apocalypse Now",
        "quote": " love the smell of napalm in the morning."

    }, {
        "person": " - Gone With the Wind",
        "quote": "Frankly, my dear, I do not give a damn."

    }, {
        "person": "- - Knute Rockne All American",
        "quote": " Tell em to go out there with all they got and win just one for the Gipper."

    }, {
        "person": "- Walt Disney",
        "quote": " It is kind of fun to do the impossible."

    }]
}

我正在使用CodePen我忘了告诉：http://codepen.io/pat_the_hat_1992/pen/qqWmYL

//你可以在那里看到我的混乱并编辑

Answer 1

尝试下面的代码，这就是我正在做的事情

var obj = JSON.parse(Quotes);
for (var i = 0; i < obj.allQuotes.length; i++) {
var counter = obj.allQuotes[i];
alert(counter.person+" says "+ counter.quote);
}

Answer 2

你所拥有的是无效的JSON。 JSON只是一种数据格式。你正在混合使用JavaScript和JSON。您无法在JSON文件中分配（或创建）变量。

{
"allQuotes": [{
    "person": "- Martin Luther King Jr.",
    "quote": "In the End, we will remember not the words of our enemies, but the silence of our friends."

}, {
    "person": " Uknown",
    "quote": "I am big! It is the pictures that got small."

}, {
    "person": "- Apocalypse Now",
    "quote": " love the smell of napalm in the morning."

}, {
    "person": " - Gone With the Wind",
    "quote": "Frankly, my dear, I do not give a damn."

}, {
    "person": "- - Knute Rockne All American",
    "quote": " Tell em to go out there with all they got and win just one for the Gipper."

}, {
    "person": "- Walt Disney",
    "quote": " It is kind of fun to do the impossible."

}]
}

没有var Quotes =的

将使您的JSON文件有效。

可以使用XMLHttpRequest对象在Javascript中下载JSON文件，如果使用jQuery，则可以在$.ajax下载。

Vanilla Javascript示例

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/myJsonFile.json');
xhr.onload = function() {
    var quotes = JSON.parse(xhr.responseText);
    console.log(quotes);
};
xhr.send();

或...如果你使用jQuery：

jQuery示例

$.ajax({
    method: "GET",
    url: "http://localhost/myJsonFile.json",
    dataType: "json",
    success: function(json) {
        console.log(json);
    }
  });

注意，使用$.ajax或XMLHttpRequest要求您在Web服务器上托管文件。如果页面位于本地文件系统上，这将不。

进一步阅读

XMLHttpRequest https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

的更多信息

JSON https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON

的更多信息

有关Jquery的$.ajax：http://api.jquery.com/jquery.ajax/

的更多信息

Answer 3

您是否尝试过W3C网站上显示的方法？它使用'+'来生成JSON文本：

    var text = '{ "employees" : [' +
    '{ "firstName":"John" , "lastName":"Doe" },' +
    '{ "firstName":"Anna" , "lastName":"Smith" },' +
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然后将JSON转换为Javascript对象，以便Javascript可以读取它：

    var object = JSON.parse(text);

要在代码中使用该对象，您可以使用以下内容：

    document.getElementById("id").innerHTML =
    obj.employees[1].firstName + " " + obj.employees[1].lastName;

在此示例中，它将打印“John Doe”，因为 obj.employees [0] .firstName 等于“John”和 obj.employees [0] .lastName 等于“Doe”

如果您想使用JQuery来打印数据：

    $("id").append(obj.employees[0].firstName + " " + obj.employees[0].lastName);

或

    $("id").text(obj.employees[0].firstName + " " + obj.employees[0].lastName);

关于如何在真实网页上实现此示例的示例代码（此代码将“Anna Smith”打印到H1元素中）：

<!DOCTYPE html>
<html>
    <body>
        <h1 id="demo"></h1>
        <script>
            var text = '{ "employees" : [' +
            '{ "firstName":"John" , "lastName":"Doe" },' +
            '{ "firstName":"Anna" , "lastName":"Smith" },' +
            '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

            var obj = JSON.parse(text);

            document.getElementById("demo").innerHTML =
            obj.employees[1].firstName + " " + obj.employees[1].lastName;
        </script>
    </body>
</html>

来源：http://www.w3schools.com/js/js_json.asp

无法从小JSON读取数据

3 个答案: