admin管理员组文章数量:1317909
How Do I add this javascript and HTML code into an angular project ? I have placed the func.js in a src folder in my angular project and in my appponent.ts file where I tried to import and use ngAfterViewInit() to load and use the javascript functions
These are the javascript and html files I am trying to add to the angular web app:
funcs.js
const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
questionnaire: 'Questionnaire',
valueset: 'ValueSet'
}
//get questionnaire
var url = '';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(quesJson, 'STU3')
// saveJsonToFile(lformsQ, 'lFormJson');
//prepare valuesets
const vsArray = createValueSetData();
//add value sets
injectValueSet(lformsQ);
// saveJsonToFile(lformsQ, 'lFormValueSetInjected');
// Add the form to the page
var options = { 'prepopulate': true };
LForms.Util.addFormToPage(lformsQ, 'formContainer', options);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getData(res, param, log) {
var data = null;
var url = endpoint + '/' + res + param;
$.ajax({
accepts: {
json: 'application/fhir+json',
xml: 'application/fhir+xml'
},
dataType: 'json',
type: 'GET',
url: url,
async: false,
success: function (response) {
data = response;
if (log)
console.log('getData: SUCCESS - "' + url + '"');
},
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(uName + ":" + uPass));
},
error: function (err) {
if (log)
console.error('getData: FAILED - "' + url + '"')
}
});
return data;
}
//recursively inject valueset into lhc json
function injectValueSet(lhcJson) {
if (lhcJson && 'items' in lhcJson) {
lhcJson.items.forEach(e => {
injectValueSet(e);
});
} else {
if ('answerValueSet' in lhcJson && 'reference' in lhcJson.answerValueSet) {
lhcJson['answers'] = vsArray[lhcJson.answerValueSet.reference];
}
}
}
//save form
function save() {
var quesResp = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'STU3', '#formContainer');
saveJsonToFile(quesResp, 'questionnaireResponse' + '-' + new Date().getTime());
// var newLform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', quesResp, lformsQ, 'STU3');
// LForms.Util.addFormToPage(newLform, 'formContainer2');
}
//open file
function openQues() {
var file = $('#file1')[0].files[0];
const fileReader = new FileReader();
fileReader.onload = event => {
var data = JSON.parse(event.target.result);
var lform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', data, lformsQ, 'STU3');
injectValueSet(lformsQ);
LForms.Util.addFormToPage(lform, 'formContainer');
};
fileReader.onerror = error => console.error("Error loading file!");
fileReader.readAsText(file, "UTF-8");
}
// get valueSet count
function getValueSetCount() {
var count = 0;
var response = getData(resource.valueset, '?_summary=count');
if (response) {
count = response.total;
}
return count;
}
//get all valueSets id
function getValueSetIds() {
var ids = [];
var count = getValueSetCount();
var response = getData(resource.valueset, '?_count=' + count + '&_element=id');
if (response) {
if ('entry' in response && response.entry.length > 0) {
response.entry.forEach(e => {
if ('resource' in e && 'id' in e.resource && 'url' in e.resource) {
ids.push({
'id': e.resource.id,
'url': e.resource.url
});
}
});
}
}
return ids;
}
//create valueSet array for form fields
function createValueSetData() {
var data = {}, dataValueSet, failedIds;
var ids = getValueSetIds();
if (ids) {
failedIds = [];
ids.forEach(idSet => {
var response = getData(resource.valueset, '/' + idSet.id + '/$expand');
if (response && 'expansion' in response
&& 'contains' in response.expansion
&& response.expansion.contains.length > 0) {
dataValueSet = [];
response.expansion.contains.forEach(e => {
dataValueSet.push({
'text': e.code + ' - ' + e.display,
'code': e.code
});
});
data[idSet.url] = dataValueSet;
} else {
failedIds.push(idSet.id);
}
});
if (failedIds.length > 0) {
console.error("Failed fetching valueSets for the following IDs: \n Count: "
+ failedIds.length + "\n" + failedIds);
}
}
return data;
}
//save json to file
function saveJsonToFile(json, fileName) {
var textToSave = JSON.stringify(json);
var data = new Blob([textToSave], { type: 'text/plain' });
var textFileURL = window.URL.createObjectURL(data);
var hiddenElement = document.createElement('a');
hiddenElement.href = textFileURL;
hiddenElement.target = '_blank';
hiddenElement.download = fileName + '.txt';
hiddenElement.click();
}
**Html file :**
<!DOCTYPE html>
<html>
<head>
<link href=".3.2/styles/lforms.min.css" media="screen"
rel="stylesheet" />
<link href=".0.3/autoplete-lhc.min.css"
rel="stylesheet" />
</head>
<body>
<button onclick="save()">
Save QuestionnaireResponse
</button>
<input type="file" id="file1">
<button onclick="openQues()">
Open QuestionnaireResponse
</button>
<div id="formContainer"></div>
<script src=".4.1/jquery.min.js"></script>
<script src=".3.2/lforms.min.js"></script>
<script src=".3.2/fhir/STU3/lformsFHIR.min.js"></script>
<script src=".0.3/autoplete-lhc.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
How Do I add this javascript and HTML code into an angular project ? I have placed the func.js in a src folder in my angular project and in my app.ponent.ts file where I tried to import and use ngAfterViewInit() to load and use the javascript functions
These are the javascript and html files I am trying to add to the angular web app:
funcs.js
const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
questionnaire: 'Questionnaire',
valueset: 'ValueSet'
}
//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-munity-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(quesJson, 'STU3')
// saveJsonToFile(lformsQ, 'lFormJson');
//prepare valuesets
const vsArray = createValueSetData();
//add value sets
injectValueSet(lformsQ);
// saveJsonToFile(lformsQ, 'lFormValueSetInjected');
// Add the form to the page
var options = { 'prepopulate': true };
LForms.Util.addFormToPage(lformsQ, 'formContainer', options);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getData(res, param, log) {
var data = null;
var url = endpoint + '/' + res + param;
$.ajax({
accepts: {
json: 'application/fhir+json',
xml: 'application/fhir+xml'
},
dataType: 'json',
type: 'GET',
url: url,
async: false,
success: function (response) {
data = response;
if (log)
console.log('getData: SUCCESS - "' + url + '"');
},
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(uName + ":" + uPass));
},
error: function (err) {
if (log)
console.error('getData: FAILED - "' + url + '"')
}
});
return data;
}
//recursively inject valueset into lhc json
function injectValueSet(lhcJson) {
if (lhcJson && 'items' in lhcJson) {
lhcJson.items.forEach(e => {
injectValueSet(e);
});
} else {
if ('answerValueSet' in lhcJson && 'reference' in lhcJson.answerValueSet) {
lhcJson['answers'] = vsArray[lhcJson.answerValueSet.reference];
}
}
}
//save form
function save() {
var quesResp = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'STU3', '#formContainer');
saveJsonToFile(quesResp, 'questionnaireResponse' + '-' + new Date().getTime());
// var newLform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', quesResp, lformsQ, 'STU3');
// LForms.Util.addFormToPage(newLform, 'formContainer2');
}
//open file
function openQues() {
var file = $('#file1')[0].files[0];
const fileReader = new FileReader();
fileReader.onload = event => {
var data = JSON.parse(event.target.result);
var lform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', data, lformsQ, 'STU3');
injectValueSet(lformsQ);
LForms.Util.addFormToPage(lform, 'formContainer');
};
fileReader.onerror = error => console.error("Error loading file!");
fileReader.readAsText(file, "UTF-8");
}
// get valueSet count
function getValueSetCount() {
var count = 0;
var response = getData(resource.valueset, '?_summary=count');
if (response) {
count = response.total;
}
return count;
}
//get all valueSets id
function getValueSetIds() {
var ids = [];
var count = getValueSetCount();
var response = getData(resource.valueset, '?_count=' + count + '&_element=id');
if (response) {
if ('entry' in response && response.entry.length > 0) {
response.entry.forEach(e => {
if ('resource' in e && 'id' in e.resource && 'url' in e.resource) {
ids.push({
'id': e.resource.id,
'url': e.resource.url
});
}
});
}
}
return ids;
}
//create valueSet array for form fields
function createValueSetData() {
var data = {}, dataValueSet, failedIds;
var ids = getValueSetIds();
if (ids) {
failedIds = [];
ids.forEach(idSet => {
var response = getData(resource.valueset, '/' + idSet.id + '/$expand');
if (response && 'expansion' in response
&& 'contains' in response.expansion
&& response.expansion.contains.length > 0) {
dataValueSet = [];
response.expansion.contains.forEach(e => {
dataValueSet.push({
'text': e.code + ' - ' + e.display,
'code': e.code
});
});
data[idSet.url] = dataValueSet;
} else {
failedIds.push(idSet.id);
}
});
if (failedIds.length > 0) {
console.error("Failed fetching valueSets for the following IDs: \n Count: "
+ failedIds.length + "\n" + failedIds);
}
}
return data;
}
//save json to file
function saveJsonToFile(json, fileName) {
var textToSave = JSON.stringify(json);
var data = new Blob([textToSave], { type: 'text/plain' });
var textFileURL = window.URL.createObjectURL(data);
var hiddenElement = document.createElement('a');
hiddenElement.href = textFileURL;
hiddenElement.target = '_blank';
hiddenElement.download = fileName + '.txt';
hiddenElement.click();
}
**Html file :**
<!DOCTYPE html>
<html>
<head>
<link href="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/styles/lforms.min.css" media="screen"
rel="stylesheet" />
<link href="https://clinicaltables.nlm.nih.gov/autoplete-lhc-versions/17.0.3/autoplete-lhc.min.css"
rel="stylesheet" />
</head>
<body>
<button onclick="save()">
Save QuestionnaireResponse
</button>
<input type="file" id="file1">
<button onclick="openQues()">
Open QuestionnaireResponse
</button>
<div id="formContainer"></div>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/lforms.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/fhir/STU3/lformsFHIR.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/autoplete-lhc-versions/17.0.3/autoplete-lhc.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
- Possible duplicate of How do I include a JavaScript script file in Angular and call a function from that script? – Austin T French Commented Nov 1, 2019 at 15:54
- I followed those steps , specifically from stackoverflow./questions/49526681/… and it is not working for me – Amd Deeb Commented Nov 1, 2019 at 18:16
2 Answers
Reset to default 1first create a new ponent through angular cli and add the variable declarations in .ts file i.e
const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
questionnaire: 'Questionnaire',
valueset: 'ValueSet'
}
//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-munity-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(quesJson, 'STU3')
// saveJsonToFile(lformsQ, 'lFormJson');
//prepare valuesets
const vsArray = createValueSetData();
//add value sets
injectValueSet(lformsQ);
// saveJsonToFile(lformsQ, 'lFormValueSetInjected');
// Add the form to the page
var options = { 'prepopulate': true };
LForms.Util.addFormToPage(lformsQ, 'formContainer', options);
then in .html page add the html code
<button onclick="save()">
Save QuestionnaireResponse
</button>
<input type="file" id="file1">
<button onclick="openQues()">
Open QuestionnaireResponse
</button>
<div id="formContainer"></div>
and then add the functions inside tag in the html file
function getData(res, param, log) {
var data = null;
var url = endpoint + '/' + res + param;
$.ajax({
accepts: {
json: 'application/fhir+json',
xml: 'application/fhir+xml'
},
dataType: 'json',
type: 'GET',
url: url,
async: false,
success: function (response) {
data = response;
if (log)
console.log('getData: SUCCESS - "' + url + '"');
},
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(uName + ":" + uPass));
},
error: function (err) {
if (log)
console.error('getData: FAILED - "' + url + '"')
}
});
return data;
}
//recursively inject valueset into lhc json
function injectValueSet(lhcJson) {
if (lhcJson && 'items' in lhcJson) {
lhcJson.items.forEach(e => {
injectValueSet(e);
});
} else {
if ('answerValueSet' in lhcJson && 'reference' in lhcJson.answerValueSet) {
lhcJson['answers'] = vsArray[lhcJson.answerValueSet.reference];
}
}
}
//save form
function save() {
var quesResp = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'STU3', '#formContainer');
saveJsonToFile(quesResp, 'questionnaireResponse' + '-' + new Date().getTime());
// var newLform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', quesResp, lformsQ, 'STU3');
// LForms.Util.addFormToPage(newLform, 'formContainer2');
}
//open file
function openQues() {
var file = $('#file1')[0].files[0];
const fileReader = new FileReader();
fileReader.onload = event => {
var data = JSON.parse(event.target.result);
var lform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', data, lformsQ, 'STU3');
injectValueSet(lformsQ);
LForms.Util.addFormToPage(lform, 'formContainer');
};
fileReader.onerror = error => console.error("Error loading file!");
fileReader.readAsText(file, "UTF-8");
}
// get valueSet count
function getValueSetCount() {
var count = 0;
var response = getData(resource.valueset, '?_summary=count');
if (response) {
count = response.total;
}
return count;
}
//get all valueSets id
function getValueSetIds() {
var ids = [];
var count = getValueSetCount();
var response = getData(resource.valueset, '?_count=' + count + '&_element=id');
if (response) {
if ('entry' in response && response.entry.length > 0) {
response.entry.forEach(e => {
if ('resource' in e && 'id' in e.resource && 'url' in e.resource) {
ids.push({
'id': e.resource.id,
'url': e.resource.url
});
}
});
}
}
return ids;
}
//create valueSet array for form fields
function createValueSetData() {
var data = {}, dataValueSet, failedIds;
var ids = getValueSetIds();
if (ids) {
failedIds = [];
ids.forEach(idSet => {
var response = getData(resource.valueset, '/' + idSet.id + '/$expand');
if (response && 'expansion' in response
&& 'contains' in response.expansion
&& response.expansion.contains.length > 0) {
dataValueSet = [];
response.expansion.contains.forEach(e => {
dataValueSet.push({
'text': e.code + ' - ' + e.display,
'code': e.code
});
});
data[idSet.url] = dataValueSet;
} else {
failedIds.push(idSet.id);
}
});
if (failedIds.length > 0) {
console.error("Failed fetching valueSets for the following IDs: \n Count: "
+ failedIds.length + "\n" + failedIds);
}
}
return data;
}
//save json to file
function saveJsonToFile(json, fileName) {
var textToSave = JSON.stringify(json);
var data = new Blob([textToSave], { type: 'text/plain' });
var textFileURL = window.URL.createObjectURL(data);
var hiddenElement = document.createElement('a');
hiddenElement.href = textFileURL;
hiddenElement.target = '_blank';
hiddenElement.download = fileName + '.txt';
hiddenElement.click();
}
and importantly add all the script imports to index.html the main index which is outside the app folder
add this in head section -
<link href="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/styles/lforms.min.css" media="screen"
rel="stylesheet" />
<link href="https://clinicaltables.nlm.nih.gov/autoplete-lhc-versions/17.0.3/autoplete-lhc.min.css"
rel="stylesheet" />
as well as this -
<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/lforms.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/fhir/STU3/lformsFHIR.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/autoplete-lhc-versions/17.0.3/autoplete-lhc.min.js"></script>
<script src="./index.js"></script>
last but not least add the selector of the created ponent in the app.ponent.html file
it should look something like this in created ponent of .html file add this to app.ponent.html
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import {OpenQues,save} from '../assets/scripts.js'
declare var tesing: any;
@Component({
selector: 'app-root',
templateUrl: './app.ponent.html',
styleUrls: ['./app.ponent.css']
})
export class AppComponent implements OnInit {
title = 'Look jQuery Animation working in action!';
public ngOnInit()
{
$.getScript('./assets/scripts.js');
}
public open()
{
OpenQues();
}
public save()
{
save();
}
}
This worked for me
本文标签：
版权声明：本文标题：How Do I add this javascript and HTML code into an angular project? and can i render html from javascript function in angular? - 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742028581a2416013.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论