MusicBrainzアプリ用のJSONオブジェクトの動的GET | AngularJS

Question

小さなアプリに検索フォームを追加したいと思います。しかし、フォームの結果をリクエストのリンクに送信する必要があります。

私は、次の要求にMusicBrainzのJSONデータベースから、アーティストの名前を取得：http://search.musicbrainz.org/ws/2/artist/?query=「アーティスト名」％20eと* & FMT = jsonの「アーティスト名は」私がしたい名前です

フォームで投稿してください。 私はちょっと愚かなのか疑問に思っていて、インターネット上のすべてを検索して、よく分かりません。ここで

は形式です：ここでは

<form ng-submit="search()" name="nomartiste"> 
    <label>Rechercher: 
    <input type="text" ng-model="nom"/> 
    <input type="submit" value="Rechercher"></input> 
    </label> 
</form> 

はJSです：

function Artiste($scope) 
{  
    $scope.nom = 'Muse'; 
    $scope.search = function() 
    { 
     var url = "http://search.musicbrainz.org/ws/2/artist/?query=" + $scope.nom + "%20e*&fmt=json"; 

     $http.get(url) 
      .then(function(response) 
     { 
      $scope.listenoms = response.data; 
      console.log($scope.listenoms); 
     }) 
    } 
} 

私がする傾向があるパラメータ

としてそれは、フォームからの$scope.nomとリクエストの結果が表示されますログコンソールに何も表示されていないことを付け加えます.Jsonツリーの場合でも：

Answer 1

から

削除「のデータは」私はNo 'Access-Control-Allow-Origin' header応答を受信しました。何も表示されない場合は、ブラウザのコンソールが何らかの理由でこれを隠している可能性があります。

ウェブサービスdocumentationから、このようなURLを使用してアーティスト：http://musicbrainz.org/ws/2/artist/?query=artist:Museを検索する必要があります。 ; コンソール$scope.listenoms = response.data.artists;

var app = angular.module("app", []); 
 

 
app.controller("controller", function($scope, $http) { 
 
    $scope.nom = "Muse"; 
 

 
    $scope.search = function() { 
 
    var url = "http://musicbrainz.org/ws/2/artist/?query=artist:" + $scope.nom + "&fmt=json"; 
 

 
    $http.get(url) 
 
     .then(function(response) { 
 
     $scope.listenoms = response.data.artists; 
 
     console.log($scope.listenoms); 
 
     }); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="controller"> 
 
    <form ng-submit="search()" name="nomartiste"> 
 
    <label>Rechercher: 
 
     <input type="text" ng-model="nom" /> 
 
     <input type="submit" value="Rechercher"></input> 
 
    </label> 
 
    </form> 
 

 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Country</th> 
 
     <th>Disambiguation</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="artist in listenoms"> 
 
     <td>{{artist.name}}</td> 
 
     <td>{{artist.country}}</td> 
 
     <td>{{artist.disambiguation}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

正しく理解していれば、クエリの実行結果を表示したいと考えています。そこで、あなたはresponseという名前のJSONオブジェクトを返すhttp.getを発行しました。しかし、存在しないデータにアクセスしようとします。あなたが提供されたURLを使用して「response.data」