Javascript 如何从JSON响应读取数据_Javascript_Php_Json_Laravel_Laravel 5

Javascript 如何从JSON响应读取数据

javascript php json laravel laravel-5

Javascript 如何从JSON响应读取数据,javascript,php,json,laravel,laravel-5,Javascript,Php,Json,Laravel,Laravel 5,我目前正在使用Laravel 5。在我的GoalsController中： public function getGoalData() { // my queries return view('userPages.usercp')->with('goal_data', $goal_data); } 当我通过打印出$goal\u data时，它是一个json字符串。现在我想通过使用Javascript来进一步处理它。我该怎么做？多谢各位编辑我想在外部脚本中读取@g

我目前正在使用Laravel 5。在我的GoalsController中：

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

当我通过

打印出

$goal\u data

时，它是一个json字符串。现在我想通过使用Javascript来进一步处理它。我该怎么做？多谢各位

编辑

我想在外部脚本中读取

@goal\u data

。以下是来自

Julian Paolo Dayag

和

VMcreator

的解决方案

在HTML文件中，将其放在末尾（在
标记之前）：

window.GOALS=

根据朱利安·保罗·达亚格的说法：

通过将变量存储到窗口对象中，意味着它将成为全局变量

现在在JS文件中，可以这样调用它：
```
var goalData=JSON.parse（GOALS）
```

在javascript中使用JSON.parse
将JSON字符串解析为对象
JSON.parse(text[, reviver])

请看这里：
编辑
您可以这样做：
<script>
     var goal_data=JSON.parse(<?php echo $goal_data ?>);
</script>

<?php 
$goal='[
    {
        "goalId":28,
        "title":"1st goal",
        "description":"what the fuck",
        "startTime":"00:00:00",
        "endTime":"22:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":""
    },
    {
        "goalId":29,
        "title":"2nd goal",
        "description":"Lorem ipsum dolor sit amet",
        "startTime":"17:25:00",
        "endTime":"17:25:00",
        "remind":1,
        "autocheck":0,
        "repeat":"once",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":""
    },
    {
        "goalId":30,
        "title":"3rd goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"05:00:00",
        "endTime":"14:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":"08\/19\/2015"
    },
    {
        "goalId":31,
        "title":"4th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"16:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"weekly",
        "freqYear":2015,
        "start":"1",
        "end":""
    },
    {
        "goalId":32,
        "title":"5th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"00:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"weekly",
        "freqYear":2015,
        "start":"9",
        "end":"14"
    },
    {
        "goalId":33,
        "title":"6th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"00:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"monthly",
        "freqYear":2018,
        "start":"8",
        "end":""
    },
    {
        "goalId":34,
        "title":"7th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"20:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"yearly",
        "freqYear":0,
        "start":"2015",
        "end":"2029"
    }
]';
?>
<script type="text/javascript">
    console.log(JSON.parse(<?php echo  json_encode($goal) ?>));
</script>

..assuming this is your head tag
<script>
    var goal_string=<?php echo json_encode($goal_data); ?>;
</script>
<script src="external_js.js" ></script>

它可以正常工作
编辑
如果您想将php变量传递到外部JS，可以将其分配给全局变量，在head标记中，您的代码应该如下所示：
<script>
     var goal_data=JSON.parse(<?php echo $goal_data ?>);
</script>

<?php 
$goal='[
    {
        "goalId":28,
        "title":"1st goal",
        "description":"what the fuck",
        "startTime":"00:00:00",
        "endTime":"22:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":""
    },
    {
        "goalId":29,
        "title":"2nd goal",
        "description":"Lorem ipsum dolor sit amet",
        "startTime":"17:25:00",
        "endTime":"17:25:00",
        "remind":1,
        "autocheck":0,
        "repeat":"once",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":""
    },
    {
        "goalId":30,
        "title":"3rd goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"05:00:00",
        "endTime":"14:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":"08\/19\/2015"
    },
    {
        "goalId":31,
        "title":"4th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"16:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"weekly",
        "freqYear":2015,
        "start":"1",
        "end":""
    },
    {
        "goalId":32,
        "title":"5th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"00:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"weekly",
        "freqYear":2015,
        "start":"9",
        "end":"14"
    },
    {
        "goalId":33,
        "title":"6th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"00:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"monthly",
        "freqYear":2018,
        "start":"8",
        "end":""
    },
    {
        "goalId":34,
        "title":"7th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"20:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"yearly",
        "freqYear":0,
        "start":"2015",
        "end":"2029"
    }
]';
?>
<script type="text/javascript">
    console.log(JSON.parse(<?php echo  json_encode($goal) ?>));
</script>

..assuming this is your head tag
<script>
    var goal_string=<?php echo json_encode($goal_data); ?>;
</script>
<script src="external_js.js" ></script>

。假设这是你的头标签
var goal_string=；

现在，您可以访问外部js.js上的var goal\u string
，以及其声明下面包含的任何js。
使用javascript中的JSON.parse
将JSON字符串解析为对象
JSON.parse(text[, reviver])

请看这里：
编辑
您可以这样做：
<script>
     var goal_data=JSON.parse(<?php echo $goal_data ?>);
</script>

<?php 
$goal='[
    {
        "goalId":28,
        "title":"1st goal",
        "description":"what the fuck",
        "startTime":"00:00:00",
        "endTime":"22:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":""
    },
    {
        "goalId":29,
        "title":"2nd goal",
        "description":"Lorem ipsum dolor sit amet",
        "startTime":"17:25:00",
        "endTime":"17:25:00",
        "remind":1,
        "autocheck":0,
        "repeat":"once",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":""
    },
    {
        "goalId":30,
        "title":"3rd goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"05:00:00",
        "endTime":"14:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":"08\/19\/2015"
    },
    {
        "goalId":31,
        "title":"4th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"16:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"weekly",
        "freqYear":2015,
        "start":"1",
        "end":""
    },
    {
        "goalId":32,
        "title":"5th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"00:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"weekly",
        "freqYear":2015,
        "start":"9",
        "end":"14"
    },
    {
        "goalId":33,
        "title":"6th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"00:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"monthly",
        "freqYear":2018,
        "start":"8",
        "end":""
    },
    {
        "goalId":34,
        "title":"7th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"20:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"yearly",
        "freqYear":0,
        "start":"2015",
        "end":"2029"
    }
]';
?>
<script type="text/javascript">
    console.log(JSON.parse(<?php echo  json_encode($goal) ?>));
</script>

..assuming this is your head tag
<script>
    var goal_string=<?php echo json_encode($goal_data); ?>;
</script>
<script src="external_js.js" ></script>

它可以正常工作
编辑
如果您想将php变量传递到外部JS，可以将其分配给全局变量，在head标记中，您的代码应该如下所示：
<script>
     var goal_data=JSON.parse(<?php echo $goal_data ?>);
</script>

<?php 
$goal='[
    {
        "goalId":28,
        "title":"1st goal",
        "description":"what the fuck",
        "startTime":"00:00:00",
        "endTime":"22:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":""
    },
    {
        "goalId":29,
        "title":"2nd goal",
        "description":"Lorem ipsum dolor sit amet",
        "startTime":"17:25:00",
        "endTime":"17:25:00",
        "remind":1,
        "autocheck":0,
        "repeat":"once",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":""
    },
    {
        "goalId":30,
        "title":"3rd goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"05:00:00",
        "endTime":"14:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"daily",
        "freqYear":0,
        "start":"08\/13\/2015",
        "end":"08\/19\/2015"
    },
    {
        "goalId":31,
        "title":"4th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"16:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"weekly",
        "freqYear":2015,
        "start":"1",
        "end":""
    },
    {
        "goalId":32,
        "title":"5th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"00:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"weekly",
        "freqYear":2015,
        "start":"9",
        "end":"14"
    },
    {
        "goalId":33,
        "title":"6th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"00:00:00",
        "remind":1,
        "autocheck":1,
        "repeat":"once",
        "goalStatus":"success",
        "type":"monthly",
        "freqYear":2018,
        "start":"8",
        "end":""
    },
    {
        "goalId":34,
        "title":"7th goal",
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "startTime":"00:00:00",
        "endTime":"20:00:00",
        "remind":0,
        "autocheck":1,
        "repeat":"until",
        "goalStatus":"success",
        "type":"yearly",
        "freqYear":0,
        "start":"2015",
        "end":"2029"
    }
]';
?>
<script type="text/javascript">
    console.log(JSON.parse(<?php echo  json_encode($goal) ?>));
</script>

..assuming this is your head tag
<script>
    var goal_string=<?php echo json_encode($goal_data); ?>;
</script>
<script src="external_js.js" ></script>

。假设这是你的头标签
var goal_string=；

现在，您可以访问外部js.js上的var goal\u string
，以及声明下面包含的任何js。
您可以使用JSON.parse（“此处的JSON string”）
例如：
单个对象
    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块周围，这样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!");
    }

您可以使用JSON.parse（“这里是JSON字符串”）
例如：
单个对象
    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块周围，这样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!");
    }

使用JS有多种方法：-
var person = JSON.parse("[{JSON1: 'Value1', JSON2: value2},{JSON1: 'Value1', JSON2: Value2}]");
console.log(person[0].JSON1);
console.log(person[0].JSON2);
alert(person[0].JSON1);
alert(person[0].JSON2);

使用Java代码：
 String s = "[0,{\"1\":{\"2\":{\"3\":{\"4\":[5,{\"6\":7}]}}}}]";
 Object obj = parser.parse(s);
 JSONArray array = (JSONArray)obj;
 System.out.println(array.get(1));

或在PHP access文件中的脚本标记内：-
 var goal_data=JSON.parse("<?php echo $goal_data ?>");

var-goal\u data=JSON.parse（“”）；
使用JS有多种方法：-
var person = JSON.parse("[{JSON1: 'Value1', JSON2: value2},{JSON1: 'Value1', JSON2: Value2}]");
console.log(person[0].JSON1);
console.log(person[0].JSON2);
alert(person[0].JSON1);
alert(person[0].JSON2);

使用Java代码：
 String s = "[0,{\"1\":{\"2\":{\"3\":{\"4\":[5,{\"6\":7}]}}}}]";
 Object obj = parser.parse(s);
 JSONArray array = (JSONArray)obj;
 System.out.println(array.get(1));

或在PHP access文件中的脚本标记内：-
 var goal_data=JSON.parse("<?php echo $goal_data ?>");

var-goal\u data=JSON.parse（“”）；
在Javascript中使用JSON.parse（），我知道JSON.parse（），但我不知道如何将php的变量传递给它。在Javascript中使用JSON.parse（），我知道JSON.parse（），但我不知道如何将php的变量传递给它。感谢您的回复，但是，它对我不起作用。当我尝试这两个示例时，Chrome返回了相同的错误：SyntaxError:Unexpected token n
当您回显json字符串时，请确保将它们包装在qoutes中。。。像这样JSON.parse（“”）
而不是JSON.parse（）我确信我用引号将其包装起来：（即使我复制了你的示例，它仍然会给我这个错误。错误仍然在这里意外标记。你能尝试包含你试图包含的JSON字符串吗？这样我们就可以检查是否存在语法错误吗？感谢你的回复，但是，它对我不起作用。当我尝试两个示例时，Chrome返回了相同的er。）ror:SyntaxError:Unexpected token n
当您回显json字符串时，请确保将它们包装在qoutes中…就像这样json.parse（“”；
而不是json.parse（）；
我确信我用引号将其包装起来：（即使我复制了你的示例，它仍然会给我这个错误。错误仍然在这里意外标记你能尝试包含你试图包含的JSON字符串吗？这样我们就可以检查是否有语法错误了？谢谢。但是如果我在JSON.parse（）中使用PHP代码
，它返回了我SyntaxError:Unexpected token确保你的json字符串有效。你在php中使用了json_encode（）吗？要将数组转换为json字符串，我再次尝试，用json_encode（）包装，就像返回视图（'userPages.usercp'）->用（'goal_data'，json_encode（'goal_data））包装
。但是，错误仍然存在。您能回显$goal_数据并发布结果吗？谢谢。但是如果我在JSON.parse（）
中使用PHP代码，它会返回我SyntaxError:Unexpected token确保您的JSON字符串有效。您使用了JSON_encode（）吗在php中，为了将数组转换为json字符串，我再次尝试使用json\u encode（）
包装$goal\u data
，就像return view（'userPages.usercp'）->with（'goal\u data'，json\u encode（'goal\u data'））
。但是，错误仍然存在。您可以回显$goal_数据并发布结果吗？当我复制您的第一个示例时，我在其他注释中尝试方法时遇到了类似的错误。当我复制您的第一个示例时，我在其他注释中尝试方法时遇到了类似的错误