Jump to content
Pitag346

Dúvidas com JSON

Recommended Posts

Olá, como vcs estão ?

 

bom, é o seguinte...

tenho um site onde quero exibir algumas imagens que estão no iTunes.

para eu buscar uma imagem eu utilizo esse link que o iTunes disponibiliza:

https://itunes.apple.com/search?term=Justin+Bieber&limit=1

e ele me retorna esse código abaixo:

{
 "resultCount":1,
 "results": [
{"wrapperType":"track", "kind":"song", "artistId":320569549, "collectionId":1049605561, "trackId":1049605634, "artistName":"Justin Bieber", "collectionName":"Purpose (Deluxe)", "trackName":"Love Yourself", "collectionCensoredName":"Purpose (Deluxe)", "trackCensoredName":"Love Yourself", "artistViewUrl":"https://itunes.apple.com/us/artist/justin-bieber/id320569549?uo=4", "collectionViewUrl":"https://itunes.apple.com/us/album/love-yourself/id1049605561?i=1049605634&uo=4", "trackViewUrl":"https://itunes.apple.com/us/album/love-yourself/id1049605561?i=1049605634&uo=4", "previewUrl":"http://a1268.phobos.apple.com/us/r30/Music69/v4/8d/89/89/8d898987-2771-877f-b06c-27813f13c79f/mzaf_6954744275616470123.plus.aac.p.m4a", "artworkUrl30":"http://is5.mzstatic.com/image/thumb/Music6/v4/0e/38/b4/0e38b405-ae2c-1da4-5959-866f7abb110e/source/30x30bb.jpg", "artworkUrl60":"http://is5.mzstatic.com/image/thumb/Music6/v4/0e/38/b4/0e38b405-ae2c-1da4-5959-866f7abb110e/source/60x60bb.jpg", "artworkUrl100":"http://is5.mzstatic.com/image/thumb/Music6/v4/0e/38/b4/0e38b405-ae2c-1da4-5959-866f7abb110e/source/100x100bb.jpg", "collectionPrice":13.99, "trackPrice":1.29, "releaseDate":"2015-11-13T08:00:00Z", "collectionExplicitness":"notExplicit", "trackExplicitness":"notExplicit", "discCount":1, "discNumber":1, "trackCount":18, "trackNumber":5, "trackTimeMillis":233719, "country":"USA", "currency":"USD", "primaryGenreName":"Pop", "isStreamable":true}]
}

Gostaria de saber como faço pra exibir somente o link do álbum, a case onde fica o link é: artworkUrl100.

 

espero tenham entendido...

 

Obrigado desde já!

 

 

Share this post


Link to post
Share on other sites

É só seguir a estrutura do objecto JSON: results[0].artworkUrl100 irá devolver a URL que pretendes.

 

Exemplo utilizando jQuery:

$(document).ready(function() {
   $.ajax({
     url: "https://itunes.apple.com/search?term=Justin+Bieber&limit=1",
     type: "post",
     dataType: "jsonp",
     success: function(data) {
       $("img").attr("src", data.results[0].artworkUrl100);
     }
   });
});

 

  • +1 1

Share this post


Link to post
Share on other sites
11 horas atrás, wootzor disse:

É só seguir a estrutura do objecto JSON: results[0].artworkUrl100 irá devolver a URL que pretendes.

 

Exemplo utilizando jQuery:


$(document).ready(function() {
   $.ajax({
     url: "https://itunes.apple.com/search?term=Justin+Bieber&limit=1",
     type: "post",
     dataType: "jsonp",
     success: function(data) {
       $("img").attr("src", data.results[0].artworkUrl100);
     }
   });
});

 

 

Obrigado amigo, só que agora estou me deparando com um outro problema, teria como "tratar" essa url que me retorna?

no caso ele retorna o link da imagem que seria: http://is5.mzstatic.com/image/thumb/Music6/v4/0e/38/b4/0e38b405-ae2c-1da4-5959-866f7abb110e/source/100x100bb.jpg , onde eu destaquei em vermelho é o tamanho da imagem, eu precisaria de um tamanho maior, basta mudar "100x100" para o tamanho que desejo, que consigo obter a imagem.

 

Teria como eu tratar esse link para outro tamanho um exemplo "300x300"  ?

 

 

Share this post


Link to post
Share on other sites

Segue um exemplo utilizando uma expressão regular, para flexibilidade.

$("img").attr("src", data.results[0].artworkUrl100.replace(/\d{3}x\d{3}/gi, "300x300"));

Da mesma forma, podes fazer algo como:

$("img").attr("src", data.results[0].artworkUrl100.replace("100x100", "300x300"));

 

  • +1 1

Share this post


Link to post
Share on other sites

Dando meu 50 cents ao post.,

 

Esse cara aqui ajuda na leitura de JSON. (Apesar que o Preview do Google Chrome tmb é muito eficiente hehe)

 

http://jsonviewer.stack.hu/

Share this post


Link to post
Share on other sites
Em 17/04/2017 at 04:56, wootzor disse:

Tenho um código parecido mas não funcionou essa função

 

player.prototype.refreshArtwork = function() {  
    var me = this;
    $.ajax({
      url: 'http://itunes.apple.com/search',
      data: {
        term: this._old_search_term,
        media: 'music'
      },
      dataType: 'jsonp',
      success: function(json) {
        if(json.results.length === 0) {
          deb('REFRESHARTWORK: null image');
          me.cover.css('background-image', '');
          me.artworkUrl = '';
          return;
        }

        // search for the best result
        var img = new Image();
        img.onload = function() {
          if(this.width * this.height > me.artworkWidth * me.artworkHeight) {
             me.artworkWidth = this.width;
             me.artworkHeight = this.height;
             me.artworkUrl = this.src;
          } 
          if((this.width == 300 && this.height == 300) || me.artworkNumber >= 5 || json.results.length <= me.artworkNumber+1) {
            me.artworkUrl = img.src;
            me.cover.css('background-image', 'url('+me.artworkUrl+')');
            deb('REFRESHARTWORK: url '+me.artworkUrl);
          } else {
            deb("Discarding image: "+this.width + 'x' + this.height);
            me.artworkNumber += 1;
            this.src = json.results[me.artworkNumber].artworkUrl100;
          }

        }
        me.artworkWidth = 0;
        me.artworkHeight = 0;
        me.artworkNumber = 0;
        me.artworkUrl = null;
        if(json.results.length)
          img.src = json.results[0].artworkUrl100;
      }
   });
}

Em 17/04/2017 at 04:56, wootzor disse:

 

 

Citar

 

 

Share this post


Link to post
Share on other sites

O meu código é um pouco diferente alguém pra me dar uma luz de como dimensionar a imagem 300X300

 

 

player.prototype.refreshArtwork = function() {  
    var me = this;
    $.ajax({
      url: 'http://itunes.apple.com/search',
      data: {
        term: this._old_search_term,
        media: 'music'
      },
      dataType: 'jsonp',
      success: function(json) {
        if(json.results.length === 0) {
          deb('REFRESHARTWORK: null image');
          me.cover.css('background-image', '');
          me.artworkUrl = '';
          return;
        }

        // search for the best result
        var img = new Image();
        img.onload = function() {
          if(this.width * this.height > me.artworkWidth * me.artworkHeight) {
             me.artworkWidth = this.width;
             me.artworkHeight = this.height;
             me.artworkUrl = this.src;
          } 
          if((this.width == 300 && this.height == 300) || me.artworkNumber >= 5 || json.results.length <= me.artworkNumber+1) {
            me.artworkUrl = img.src;
            me.cover.css('background-image', 'url('+me.artworkUrl+')');
            deb('REFRESHARTWORK: url '+me.artworkUrl);
          } else {
            deb("Discarding image: "+this.width + 'x' + this.height);
            me.artworkNumber += 1;
            this.src = json.results[me.artworkNumber].artworkUrl100;
          }

        }
        me.artworkWidth = 0;
        me.artworkHeight = 0;
        me.artworkNumber = 0;
        me.artworkUrl = null;
        if(json.results.length)
          img.src = json.results[0].artworkUrl100;
      }
   });
}


 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
    • By huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
    • By Vinicius Bazan
      Estou tendo um problema em elaborar o meu código com javascript, estou fazendo um teste em html e css simples pra depois elaborar um website, o objetivo aqui é fazer um relógio pelo JS e ter um contador em baixo desse relógio que vai pegar valores a partir de um switch para esse contador funcionar, isso porque se trata de dados sobre tipos de agressões contra as mulheres, então os cases do switch tem o dado em segundos para executar a formula, uma mensagem inicial e uma mensagem final.
       O usuário teria dois botões, um de cada lado (nesse caso estou usando 2 div com as ID's #btd e #bte, ao apertar esses botões aumentaria o valor de uma variável em +1 ou -1 e isso faria o switch escolher outro case e trocar os dados do contador, mas os dados não são trocados, mantendo as informações iniciais.
       Ao todo tem 4 funções, a função relogio(), contador(), btd() e bte(), sendo que a btd e bte estão dentro da contador() 
       Estou colocando o codigo dentro do spoiler, se alguém puder me ajudar a achar alguma solução agradeço
       
      OBS: Eu nem sei se pode ter uma function dentro da outra, mas como estou aprendendo JS ainda, imagino que assim como outras estruturas (If, Else, Switch, etc...) possa ser possível colocar uma função dentro da outra.
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.