I am not sure if my title is okay, I am new to Elixir and Phoenix framework. When I say new, I meant new, like I just started reading for only a week.
I have a database and tables already populated in PostgreSQL and I need to return and display result of query in HTML page named index.html
Here's the instruction
>Use the Phoenix framework
*
Use the Ecto library
*
Use PostgreSQL for the database
*
Use the included database seed (.csv)
*
Use JSON API format for all requests and responses
I have configured my elixir application. added dependencies, tables, schemas. I have also imported the templated html page. which is shown below. Can someone give me an idea on:
1. Build query in a function and where to put that (e.g. Repo)
2. Call that function
3. Return the result in HTML
What I have tried:
Here's the HTML where I need to show the data
<!DOCTYPE html>
<html>
<head>
<title>VAMP Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
h1 {
padding: 0 0 0 15px;
}
</style>
</head>
<body>
<header>
<h1>Users</h1>
</header>
<section>
<ul id="main-list" class="list-group"></ul>
</section>
<script>
let request = (method, path) => {
var headers = new Headers();
headers.append('Accept', 'application/vnd.api+json');
return fetch(new Request(`http:
method,
headers,
mode: 'cors',
cache: 'default'
}));
};
let get = (path) => { return request('GET', path) };
let put = (path) => { return request('PUT', path); };
let post = (path) => { return request('POST', path); };
(function init() {
get('/users').then(response => {
return response.json();
}).then(json => {
var includedMap = {};
json.included.forEach(item => {
if (!includedMap[item.type]) {
includedMap[item.type] = {};
}
includedMap[item.type][item.id] = item;
});
json.data.forEach(item => {
if (item.type && item.type.toLowerCase() === 'user' && item.relationships.taggables.data.length > 0) {
var tagsHtml = item.relationships.taggables.data.map(taggableRelationship => {
if (taggableRelationship && taggableRelationship.type === 'taggable') {
var taggable = includedMap[taggableRelationship.type][taggableRelationship.id];
if (taggable && taggable.relationships && taggable.relationships.tag && taggable.relationships.tag.data) {
var tag = includedMap[taggable.relationships.tag.data.type][taggable.relationships.tag.data.id];
if (tag) {
return `<span class="tag label label-default"">${tag.attributes.name}</span> `;
}
}
}
return '';
}).join('');
var name = item.attributes['full-name'];
var country = item.attributes.country || 'the earth';
$("#main-list").append(`<li class="list-group-item"><span class="name">${name} from ${country}</span><div class="tags">${tagsHtml}</div></li>`);
}
})
});
})();
</script>
<form>
<div>
<p><%= sample() %></p>
</div>
</form>
</body>
</html>
Submit an article or tip