带有嵌入式json的HTML是否可以通过显示来自elixir的查询结果来实现？ [英] Is HTML with embedded json doeable by displaying queried result from elixir?
问题描述
我不确定我的头衔是否合适，我是Elixir和Phoenix框架的新手。当我说新的时候，我的意思是新的，就像我刚刚开始阅读一周一样。
我有一个数据库和表格已经填充在PostgreSQL中我需要返回并在名为index.html的HTML页面中显示查询结果
这是指令
>使用Phoenix框架
*
使用Ecto库
*
使用PostgreSQL作为数据库
*
使用包含的数据库种子（.csv）
*
对所有请求和响应使用JSON API格式
我配置了我的elixir应用程序。添加了依赖项，表，模式。我还导入了模板化的html页面。如下所示。有人可以给我一个想法：
1.在函数中构建查询以及在哪里放置（例如Repo）
2。调用该函数
3.将结果返回HTML
我尝试了什么：
这是我需要显示数据的HTML
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>
推荐答案
{path}`，{
方法，
标头，
模式：'cors'，
cache：'default'
}））;
};
let get =（path）=> {return request（'GET'，path）};
let put =（path）=> {return request（'PUT'，path）; };
let post =（path）=> {return request（'POST'，path）; };
（函数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>
{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>`;
}
}
}
返回'';
}）。join（''）;
var name = item.attributes ['full-name'];
var country = item.attributes.country ||'the earth';
{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>
("#main-list").append(`<li class="list-group-item"><span class="name">
这篇关于带有嵌入式json的HTML是否可以通过显示来自elixir的查询结果来实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
