MusicBrainz uygulaması için bir JSON nesnesinin dinamik GET'i | AngularJS

Question

Küçük uygulamama bir arama formu eklemek istiyorum. Ancak formun sonucunu, talebin linkine göndermelidir.

aşağıdaki isteği ile musicbrainz JSON veritabanından sanatçının adları almak: http://search.musicbrainz.org/ws/2/artist/?query= "BİR ARTIST ADI" % 20e * & Fmt = json "BİR ARTIST ADI" Ben istiyorum adıdır

form ile gönderin. Biraz aptalca soru sorduğum için üzgünüm birazcık yeni, çünkü internette araştırıyorum ve iyi anlayamıyorum.

İşte

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

JS geçerli:: İşte

şeklidir

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); 
     }) 
    } 
} 

O

Ben eğilimi bir parametre olarak formdan $scope.nom isteğe sonucunu göstermesi gerekir log konsolunda hiçbir şeyin görüntülenmediğini ekleyin, hatta Json tree :(

Answer 1

den

Kaldır 'veri', bir No 'Access-Control-Allow-Origin' header yanıt aldı. Hiçbir şey görmüyorsanız, tarayıcınızın konsolu bir sebepten dolayı gizleniyor olabilir.

Web hizmetlerinden documentation, bir sanatçı aramak için şu şekilde bir URL kullanmalısınız: http://musicbrainz.org/ws/2/artist/?query=artist:Muse. ; konsol $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

Doğru anlıyorsam, sorgularınızı çalıştırmanın sonucunu görüntülemek istersiniz. Yani, yanıt olarak adlandırılan bir JSON nesnesini döndüren bir http.get verdiniz. Ama sonra var olmayan verilere erişmeye çalışıyorsunuz. Eğer verilen URL'yi kullanarak 'response.data'