View Full Version : Format data returned by API

12-01-2012, 02:24 PM
I would like to know how to format the images are retrieved when the following function is called. Is there any way I can apply css style to it?

myscript.js file

function bio()
echonest.artist("ARH6W4X1187B99274F").biographies( function(biographyCollection) {
$('#gallery').append( biographyCollection.at(1).to_html('<p>${text} </p>') );

12-01-2012, 02:40 PM
short answer, Yes.

long answer - sure all kinds of ways, but we cant help without seeing the resulting html or an example of it. your bio function is using a lot of code out of the current scope you have shown us so it's not really much to go on.

I suppose you could add a class or id to the <p> tag and use css to target the image within that class or id

12-01-2012, 03:00 PM
Thank you for your reply.


<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="mystyle.css" />
<script src="jquery-1.4.4.js"></script>
<script src="jquery.tmpl.min.js"></script>
<script src="jquery.echonest.js"></script>
<script src="lastfm.api.js"></script>
<script src="lastfm.api.md5.js"></script>
<script src="lastfm.api.cache.js"></script>
<script src="testScript.js"></script>

<div id="page">
<div id = "header">
<div class="title">Music Recommendation</div>
<div class="subText">Recommendation: a test site!</div>
<div id="menu">
<div class="menuLink"><a href="index.html">Home</a></div>
<div class="menuLink"><a href="index.html">About</a></div>
<div class="menuLink"><a href="index.html">Contact</a></div>

<div id="pageContent">
<div class="articleTitle">TITLE</div>
<div class="articleContent">
<p>This is a test</p>
<input type="text" id="artist" name="artist" />
<button id="search-artist">Find</button>
<div id = "container">
<div id = "gallery">
<button type="button" onclick="bio()">Try it</button>


The above is the html I am using.

function bio()
var echonest = new EchoNest("I7BZAXMQ7B77C9MEJ");
echonest.artist("ARH6W4X1187B99274F").biographies( function(biographyCollection) {
$('.articleContent').append( biographyCollection.to_html('<p>${text} </p>') );

The above is the function I am calling.

12-01-2012, 03:17 PM
I took your suggestion in assigning an id and it worked, thank you!
I was wondering how to do that to images as follows.

How would I go about formatting the following?

function getSong()
echonest.artist("Radiohead").images( function(imageCollection) {
$('#gallery').prepend( imageCollection.to_html('<img src="${url}">', {start: 0, end: 5}) );

12-01-2012, 03:32 PM
Managed to find a solution by adding div tags around the image tags.

Thank you for your help.