javascript - 如何从 JSON 响应中读取数据

Question

我目前正在使用 Laravel 5。在我的目标 Controller 中:

public function getGoalData()
{
    // my queries
    return view('userPages.usercp')->with('goal_data', $goal_data);
}

当我打印出$goal_data时通过<?php echo $goal_data ?> ，它是一个 json 字符串。现在我想通过使用Javascript来进一步处理来阅读它。我怎样才能做到这一点？谢谢。

编辑

我想读 @goal_data在外部脚本中。这是 Julian Paolo Dayag 的解决方案和VMcreator 。

• 在 HTML 文件中，将其放在末尾(</body> 标记之前):

<script> window.GOALS = <?echo json_encode($goal_data); ?> </script>

根据朱利安·保罗·达亚格 (Julian Paolo Dayag) 的说法:

by storing a variable into the window object, means it will become a global variable.

• 现在在你的 JS 文件中，你可以这样调用它:var goalData = JSON.parse(GOALS);

Answer 1

您可以使用 JSON.parse("json string here");

示例:

单个对象

    var person = JSON.parse("{name: 'hello world', age: 18}");

    console.log(person.name); // outputs "hello world"
    console.log(person.age);  // outputs 18

对象数组

    var person = JSON.parse("[{name: 'hello world', age: 18},{name: 'foo bar', age: 10}]");

    console.log(person[0].name); // outputs "hello world"
    console.log(person[0].age);  // outputs 18
    console.log(person[1].name); // outputs "foo bar"
    console.log(person[1].age);  // outputs 10

有时您的 JSON 字符串有错误，导致 JSON.parse() 在解析失败时抛出异常。

建议将 JSON.parse() 包裹在 try/catch block 周围，这样 JavaScript 就不会停止脚本的执行。

    try {
        var person = JSON.parse("[{name: 'hello world', age: 18},{name: 'foo bar', age: 10}]");

        console.log(person[0].name); // outputs "hello world"
        console.log(person[0].age);  // outputs 18
        console.log(person[1].name); // outputs "foo bar"
        console.log(person[1].age);  // outputs 10
    } catch(e) {
        console.log("JSON parse failure!");
    }