質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

4299閲覧

angular.jsでJSONを読み出す。

kuniatsu

総合スコア141

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

2クリップ

投稿2015/08/17 22:38

以下のソースのscript.jsをJSONデータに変えたいのですがどのように書き換えればよいでしょうか?

index.html

<!DOCTYPE html> <html lang="ja" ng-app> <head>     <meta charset="UTF-8">     <title>AngularでJSONを呼ぶ</title>     <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>     <script src="script.js"></script> </head> <body>     <h1>AngularJSの練習</h1>     <div ng-controller="mainCtrl">     <ul>     <li ng-repeat="user in users">     {{user.name}}     </li>     </ul>        </div> </body> </html>

script.js
var mainCtrl = function($scope) {
$scope.users = [
{"name":"masao"},
{"name":"hideo"},
{"name":"yoshimura"},
];

}

上のscript.jsを変更しデータを下記のscript.JSONから取得する方法が知りたいです。

script.JSON
[
{"name":"masao"},
{"name":"hideo"},
{"name":"yoshimura"},
]

どのようすればいいでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

$resourceを使用すればできます。

var json = $resrource('JSONのパス');
$scope.user = json.query();

でscopeに注入することができるとおもいます。

投稿2015/08/17 23:43

Zousan

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuniatsu

2015/08/19 03:43

うまくいきませんでした。 index.htmlはそのままに script.js var mainCtrl = function($scope) { // $scope.users = [ // {"name":"masao"}, // {"name":"hideo"}, // {"name":"yoshimura"}, // ]; var json = $resrource('json.JSON'); $scope.users = json.query(); } json.JSON {"name":"masao"}, {"name":"hideo"}, {"name":"yoshimura"} ] としています。あと、質問の質問になってしまいますが、ローカルで実行した場合とサーバーに上げて実行した場合と挙動が違うように感じたのですが、差があるのは普通でしょうか?
Zousan

2015/08/19 06:31 編集

mainCtrlの引数に$resourceを入れてみてください。具体的には var mainCtrl = function($scope, $resource){ }; としてください。
kuniatsu

2015/08/19 13:57 編集

すばやい回答ありがとうございます。しかしうまくいきませんでした。 chromeを使っているのですが、コンソールに angular-1.0.1.min.js:5526  Error: Unknown provider: $resourceProvider <- $resource at Error (native) at https://code.angularjs.org/angular-1.0.1.min.js:2627:15 at Object.getService [as get] (https://code.angularjs.org/angular-1.0.1.min.js:2755:39) at https://code.angularjs.org/angular-1.0.1.min.js:2632:45 at getService (https://code.angularjs.org/angular-1.0.1.min.js:2755:39) at invoke (https://code.angularjs.org/angular-1.0.1.min.js:2773:13) at Object.instantiate (https://code.angularjs.org/angular-1.0.1.min.js:2805:23) at $get (https://code.angularjs.org/angular-1.0.1.min.js:4620:24) at https://code.angularjs.org/angular-1.0.1.min.js:4201:17 at forEach (https://code.angularjs.org/angular-1.0.1.min.js:117:20) このようなエラーが発生しており、5526行の内容は return logFn.apply(console, args); でした。「apply(console, args);」の下に赤のアンダーラインがでています。 もし、何かお分かりになりましたらご連絡いただけるとうれしいです。
Zousan

2015/08/19 13:59 編集

タイポです。$resrourceになっていませんか。正しくは$resourceです。 すみません。あといい忘れていましたが$resourceを使用するにはngResourceというAngularJSのモジュールを参照する必要があります。 詳しくは下記のサイトなどを参考にしてみてください。 http://js.studio-kingdom.com/angularjs/ngresource_service/$resource 見たところAngular1.0を使用しているようですが、最新版は1.4なのでできれば新しいものを使用したほうが良いと思います。 それから、そもそも論になってしまいますが、Jsonをそのまま同じファイルに書くのが冗長だと考えるならば、別のJavaScriptファイルに配列だけ定義してその配列を参照するというやり方もあります。
kuniatsu

2015/08/19 14:03 編集

<!--間違えて記入したので削除しました-->
kuniatsu

2015/08/19 14:02 編集

すみません、間違えて同じ内容をかきこんでしまいました。こちらこそ勉強不足でもうしわけありません。 別のモジュールが必要だったのですね。朝から晩まで今日一日ありがとうございました。
Zousan

2015/08/19 14:05

いえいえ、少しでも力になれれば幸いです。
kuniatsu

2015/08/20 08:54

これで動きました。ありがとうございました。 <!DOCTYPE html> <html lang="ja" ng-app="phonecatApp"> <head> <meta charset="UTF-8"> <title>AngularでJSONを呼ぶ</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-resource.min.js"></script> <script src="script.js"></script> </head> <body> <h1>AngularJSの練習</h1> <div ng-controller="mainCtrl"> <ul> <li ng-repeat="user in users"> {{user.name}} </li> </ul> </div> </body> </html> var phonecatApp = angular.module('phonecatApp', ["ngResource"]); phonecatApp.controller('mainCtrl', ["$scope", "$resource", function ($scope, $resource) { var contents = $resource("json.JSON"); $scope.users = contents.query(); }]);
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問