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>
<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://localhost:4000/api/v1${path}`, {
        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>
Posted

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