Click here to Skip to main content
15,881,709 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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>
 <title>VAMP Test</title>
  <link href="" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
  <script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    h1 {
      padding: 0 0 0 15px;
    <ul id="main-list" class="list-group"></ul>
    let request = (method, path) => {
      var headers = new Headers();
      headers.append('Accept', 'application/vnd.api+json');
      return fetch(new Request(`http://localhost:4000/api/v1${path}`, {
        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;
        }); => {
          if (item.type && item.type.toLowerCase() === 'user' && > 0) {
            var tagsHtml = => {
              if (taggableRelationship && taggableRelationship.type === 'taggable') {
                var taggable = includedMap[taggableRelationship.type][];
                if (taggable && taggable.relationships && taggable.relationships.tag && {
                  var tag = includedMap[][];
                  if (tag) {
                    return `<span class="tag label label-default"">${}</span> `;
              return '';

            var name = item.attributes['full-name'];
            var country = || 'the earth';
            $("#main-list").append(`<li class="list-group-item"><span class="name">${name} from ${country}</span><div class="tags">${tagsHtml}</div></li>`);

        <p><%= sample() %></p>


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900