MusicBrainz应用程序|AngularJS的JSON对象的动态GET

Dynamic GET of a JSON object for MusicBrainz app | AngularJS

本文关键字：对象 动态 GET JSON MusicBrainz AngularJS 应用程序      更新时间：2023-09-26

我想在我的小应用程序中添加一个搜索表单。但它必须将表单的结果发送到请求的链接。

我通过以下请求从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树：（

如果我理解正确，您希望显示运行查询的结果。因此，您发布了一个http.get，它返回一个名为response的JSON对象。但您随后尝试访问不存在的数据。

从"response.data"中删除"data"

使用您提供的URL，我收到了No 'Access-Control-Allow-Origin' header响应。如果你没有看到任何东西，你的浏览器控制台可能会出于某种原因隐藏这一点。

从他们的web服务文档中，你应该使用这样的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>

相关文章：