Format data returned by API

prital09 · 12-01-2012, 01: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

Code:

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

DanInMa · 12-01-2012, 01: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

prital09 · 12-01-2012, 02:00 PM

Thank you for your reply.

Code:

<html>

	<head>
		<title>Test</title>
		<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>
	</head>

	<body>
		<div id="page">
			<div id = "header">
            	<div class="title">Music Recommendation</div>
       			<div class="subText">Recommendation: a test site!</div>
            </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>
			
			<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>
							</div>
						</div>
				</div>
			</div>
		</div>
	</body>

</html>

The above is the html I am using.

Code:

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.

prital09 · 12-01-2012, 02: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?

Code:

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

prital09 · 12-01-2012, 02:32 PM

Managed to find a solution by adding div tags around the image tags.

Thank you for your help.