从JSON显示图像

Trying to display the cover art with the results. Something in the img src tag is causing the app not to load. If I just point the img to data.tracks[i].album.name (obviously not a real url, but enough to test if it's working) it pastes it in just fine, but the moment I change it to paste the url in place, it makes the whole app stop working.

$('#findTracks').click(function (e) {
                e.preventDefault(); // override/don't submit form
                $('#recommendations').empty();
                var artist = $('#artist').val();
                var userid = "";
                var playlistid = "";

                $.ajax({
                    url: 'http://ws.spotify.com/search/1/track.json?q=' + artist,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        if (data.tracks.length > 0) {
                            var tracksLength = data.tracks.length, html = '';
                            for (var i=0; i<tracksLength; i++) {
                                var href = '';
                                if (data.tracks[i].album.availability.territories.indexOf(' GB ') !== -1) { // data.tracks[i].href
                                    href = data.tracks[i].href;
                                    href = 'makeReq(\''+data.tracks[i].name + ' by '+data.tracks[i].artists[0].name+'\')';
                                    html += '<li><a href="#" onclick="' + href + '">' +data.tracks[i].name + ' by '+data.tracks[i].artists[0].name+ ' <img src="' +data.tracks[i].album.images[0].url+ '" /></a>';html += '</li>';

                                    html += '</li>';
                                }
                            }
                            $('#third').css('display', 'block');
                            $('#recommendations').append(html);
                        } else {
                            $('#recommendations').append('<li>No matches returned.</li>');
                            $('#third').css('display', 'none');
                        }
                    },
                    error: function(err) {
                        alert("The Spotify API failed to return a response.");
                    }
                });                   
            });

This is my first time ever coding in javascript so please go easy on me! lol

EDIT:

This seems to be running well! However, many of the songs do nothing when I click on them

For example, type "Don't Stop" and only "The Black Eyed Peas - Don’t Stop The Party" works out of the first ten...anybody know why?

also, anybody known why "if (data.tracks[i].album.availability.territories.indexOf(' GB ') !== -1)" is in there? If I take it out this all stops working...I am not in G.B.

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

weixin_33749242 2015-02-10 18:34

关注

If you look in the console you are getting the error

Uncaught TypeError: Cannot read property '0' of undefined

looking at the data the query returns we notice that data.tracks[i].album returns

{
    "released": "2006",
    "href": "spotify:album:2knAf4wg8Gff8q1bXiXCTz",
    "name": "The Dutchess",
    "availability": {
        "territories": "MX"
    }
}

there is no property images so when you call

data.tracks[i].album.images[0]

you get the undefined error, causing the script to halt execution.
I'm unfamiliar with the spootify api but taking a quick glance at the api theres the endpoint for get-album. Heres what I was able to come up with to get the album art

$.get("http://ws.spotify.com/search/1/track.json?q=Fergie",function(data){
   var albumId = data.tracks[97].album.href.split(":")[2];
   $.get("https://api.spotify.com/v1/albums/" + albumId,function(albumResponse){
       var firstImage = albumResponse.images[0];
       $('body').append($('<img/>',{
          src : firstImage.url,
          width : firstImage.width,
          height : firstImage.height
       }));
   })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>

You should research more into how to get the album art since I'm unsure if this is the optimal solution.

The search endpoint you mentioned is different from the one your using.

   One your using
   url: 'http://ws.spotify.com/search/1/track.json?q=' + artist,
   One you linked to
   url: 'https://api.spotify.com/v1/search?q=' + artist + '&type=track,artist&market=GB',

Heres your solution with the change in endpoint

$('#findTracks').click(function(e) {
  e.preventDefault(); // override/don't submit form
  $('#recommendations').empty();
  var artist = $('#artist').val();
  var userid = "";
  var playlistid = "";

  $.ajax({
    //url: 'http://ws.spotify.com/search/1/track.json?q=' + artist,
    url: 'https://api.spotify.com/v1/search?q=' + artist + '&type=track,artist&market=GB',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      if (data.tracks.items.length > 0) {
        data.tracks = data.tracks.items
        data.artists = data.artists.items
        var tracksLength = data.tracks.length,
          html = '';
        for (var i = 0; i < tracksLength; i++) {
          var href = '';
          href = data.tracks[i].href;
          href = 'makeReq(\'' + data.tracks[i].name + ' by ' + data.tracks[i].artists[0].name + '\')';
          html += '<li><a href="#" onclick="' + href + '">' + data.tracks[i].name + ' by ' + data.tracks[i].artists[0].name + ' <img src="' + data.tracks[i].album.images[0].url + '" /></a>';
          html += '</li>';
          html += '</li>';

        }
        $('#third').css('display', 'block');
        $('#recommendations').append(html);
      } else {
        $('#recommendations').append('<li>No matches returned.</li>');
        $('#third').css('display', 'none');
      }
    },
    error: function(err) {
      alert("The Spotify API failed to return a response.");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Artist:
<input type="text" id="artist" />
<button id="findTracks">Find Tracks</button>
<div id="recommendations"></div>

</div>

报告相同问题？

关注问题

前端发送简单json,后端怎么接收? java
2023-02-06 23:11

回答 2 已采纳收不到是没有使用@RequestBody注解。后端代码使用了一个字符串参数接收前端发送的数据，但前端发送的是 JSON 格式的请求体，需要使用一个 Java 对象来接收。修改代码如下 @RestCon
浏览器网页查看json数据显示的代码排版和别人怎么不一样？ json
2020-02-12 12:47

回答 2 已采纳正常返回就你那样的，下面那个是用一些插件格式化后的样子，数据传输节省空间，换行空格什么的都给你去掉了，哪来的排版，那些插件是获取到数据后通过符号和层级结构去还原他原本的格式的
将Json对象数据中的内容局部刷新式显示在原页面 html javascript json 有问必答
2021-12-04 19:36

回答 2 已采纳题主如何调用next_step的？看题主描述应该是放在表单中input type='submit'或者button（未添加type=button默认也是提交按钮），这样导致表单提交了，应该阻止表单提交
前端moa gif json显示动画
2024-01-11 17:15

jsPao的博客使用requestAnimationFrame()方法创建一个动画函数，将JSON文件的数据传递给该函数，使用Web动画API创建一个SVG动画，并将JSON数据渲染到SVG动画中。
如何把前端的Form表单的数据打包成json传到Java代码后端 html java 前端
2022-07-12 21:30

回答 4 已采纳你的思路是对的，确实可以使用ajax，使用方法可以参考在Html页面中调用ajax代码 - YangBinChina - 博客园以最原始
easyui datagrid 不显示json数据 easyui json
2015-05-30 16:54

回答 2 已采纳什么版本的easyui。。1.3.2测试你的代码没问题。。你的连表头都没有，是不是导入的样式有冲突什么的，开发工具看下表头都有什么样式 ``` ``` 你导入boots
如何把请求到json数据再次按照类型分类显示！ ajax html5 javascript jquery json
2020-09-07 00:04

回答 1 已采纳 https://blog.csdn.net/luyafei_89430/article/details/10410879
前端JSON处理
2022-05-30 17:23

Java全栈研发大联盟的博客 JSON 解析与序列化 JSON 内置了两种方法： JSON.parse() ：将数据转换为 JavaScript 对象。 JSON.stringify() ：将 JavaScript 对象转换为字符串。 1. JSON.parse() JSON.parse() 的语法如下： JSON.parse(text, ...
JSON响应返回undefined ajax jquery json php
2017-12-20 04:51

回答 2 已采纳 Try this. I'm sure you have no header('Content-type:application/json') in you PHP if I'm not mista
需求给了.json.api文件怎么用 json 前端
2022-09-27 13:36

回答 1 已采纳 post请求呗也区分请求。
Django 从前端页面调用用ajax POST无法跳转 ajax django json
2020-05-20 11:31

回答 2 已采纳 ajax POST请求的数据格式为Json，View就应该返回Json代码，Ajax收到数据后Json数据后，然后判断通过Js进行页面跳转
JSON简介及前端简单解析(一)
2023-08-21 20:00

两个蝴蝶飞的博客 JSON,全称是JavaScript Object Natotion(JavaScript 对象表示法)，是存储和交换文本信息的语法。与XML类似。但JSON 比 XML 更小、更快，更易解析。是轻量级的，且具有自我描述性，更好地理解。JSON 独立于语言：JSON...
怎么获取解析json字符串？ json
2018-11-08 07:46

回答 3 已采纳一层一个点a.a.a.a.a.a.a。。。。。。。
ajax获取数据库图片显示,json获取数据库的信息在前端页面显示方法
2021-08-05 18:10

百里临渊的博客 ajax发送请求到controller,controller响应一个json格式的数据给页面，JSON.parse()再解析json字符串，用$.each遍历。@RequestMapping("/list")public @ResponseBody java.util.List List() throws Exception{return ...
关于如何将从服务器接收的json数据动态显示在前端页面上的问题
2018-10-18 15:27

Kobe_G的博客首先你要学会如何向后端发送请求和接收数据，然后就可以试着将接收的数据显示在前端页面上。现在，我们在本地上写一个json文件： [ { "name": "xxl", "age": 20, "...
没有解决我的问题, 去提问

悬赏问题

¥15 如何用Labview在myRIO上做LCD显示？(语言-开发语言)
¥15 Vue3地图和异步函数使用
¥15 C++ yoloV5改写遇到的问题
¥20 win11修改中文用户名路径
¥15 win2012磁盘空间不足,c盘正常，d盘无法写入
¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
¥15 帮我写一个c++工程
¥30 Eclipse官网打不开，官网首页进不去，显示无法访问此页面，求解决方法
¥15 关于smbclient 库的使用

码龄粉丝数原力等级 --

从JSON显示图像

1条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

从JSON显示图像

1条回答 默认 最新

悬赏问题

1条回答默认最新