bjay tiamsic Ответов: 0

Можно ли использовать HTML со встроенным json, отображая запрошенный результат из elixir?

Я не уверен, что мой титул подходит, я новичок в Elixir и Phoenix framework. Когда я говорю новое, я имею в виду новое, как будто я только начал читать всего неделю.

У меня есть база данных и таблицы, уже заполненные в PostgreSQL, и мне нужно вернуть и отобразить результат запроса на HTML-странице с именем index.html

Вот инструкция
>используйте фреймворк Phoenix
*
Использовать библиотеку Экто
*
Используйте PostgreSQL для базы данных
*
Используйте включенное семя базы данных (.csv)
*
Используйте формат API JSON для всех запросов и ответов


Я настроил свое приложение elixir. добавлены зависимости, таблицы, схемы. Я также импортировал шаблонную html-страницу. что и показано ниже. Может ли кто-нибудь дать мне представление о том, как это сделать?:

1. построить запрос в функции и куда его поместить (например, РЕПО)
2. Вызывать эту функцию
3. Возвратить результат в HTML

Что я уже пробовал:

Вот HTML, где мне нужно показать данные

<!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>

0 Ответов