I am using fetch() command to get an array of data in JSON format. I am using function fetchURL() to get data in JSON format. I use async-await. Then in each data received I am trying to add it's login field to an ordered list that I have created in the HTML file.
I have made a createListItem() function to find the ordered list tag in the HTML file and append in it the login field. But first I try to store all the login fields in an array arr. But I am not able to store the login fields in it.
But when I directly use createListItem() function to create a list item with login" field as text I am able to add these fields to the ordered list and hence I get the ordered list.
I am commenting out the lines that get me direct Output on the browser window when I do not store the login fields in the arr:
Code:
function createListItem(text) {
const parent = document.getElementsByTagName("ol");
const entry = document.createElement("li");
entry.textContent = text;
parent[0].appendChild(entry);
}
const url = "https://api.github.com/users ";
async function fetchURL() {
return (await fetch(url)).json();
}
let arr = [];
async function createList() {
const data = await fetchURL();
for (let i = 0; i < data.length; i++) {
//createListItem(`${data[i].login}`);
arr.push(data[i].login);
}
}
createList();
you are getting the data in array, you need to create list after you call createList() function:
createList().then(function(){
arr.forEach(element => {
createListItem(element);
});
});
you can also define arr in the createList function and return that then your code would be like this:
async function createList() {
let arr = [];
const data = await fetchURL();
for (let i = 0; i < data.length; i++) {
//createListItem(`${data[i].login}`);
arr.push(data[i].login);
}
return arr;
}
createList().then(arr=>{
arr.forEach(element => {
createListItem(element);
});
});
You can achieve your objective with just one async function:
const url="http://jsonplaceholder.typicode.com/users";
async function getList(u){
const arr=(await fetch(u).then(r=>r.json())).map(e=>e.username);
document.querySelector("ol").innerHTML=arr.map(u=>`<li>${u}</li>`).join("");
console.log(arr);
}
getList(url);
<h2>List of login names</h2>
<ol></ol>
<p>end of page</p>
In the above snippet I used the public resource provided by typicode.com and extracted the property of username instead of login.
Related
I'm using wkhtmltopdf to print my data and I load content from json file to html. I'm trying to do, loop through the array and pass data to variable and the table take data from variable to show and save pdf then clear variable write next item in array.
When I run js file, it generates pdf for each item but same loaded on html template and pdf.
Here is my loop the data and savePDF function.
let rawdata = fs.readFileSync('data.json');
let data = JSON.parse(rawdata);
async function pdfCreate() {
let parcaNo = data1.oemCode;
let uygunlukItems = data1.uygunluk;
var params = {
parcaNo: parcaNo,
uygunlukItem: uygunlukItems
};
console.log(parcaNo);
for (var i = 0, p = Promise.resolve(); i < data.length; i++) {
parcaNo = data[i].oemCode;
uygunlukItems = data[i].uygunluk
console.log(data[i].oemCode)
p.then(saveToPdf('catalog', path.resolve(__dirname, `./PDF/${parcaNo}.pdf`), params, () => {}));
parcaNo = "",
uygunlukItems = [];
}
}
await pdfCreate();
Here is my json example :
Here is my json example :
How can I create pdf for each element ?
Thanks for your help!
I have a simple program that reads a css file (which is available on GitHub pages) and parse the css to an array so I can put at in a list.
I have an dictionary with words, like a vocabulary list which shows me the translation and I can also search for words.
Everything works fine so far but I am really new and this is my first project and I want some advise about my codestructure.
At the moment I have to fetch the csv file (which never changes) in different methods with getData. I do this in init dictionary and again in search and show, because I need the dictionary again. Wouldn’t it be better to get the data once and then use it with all functions?
But then I have to write a lot function into another which is not so good practice I think.
I would really appreciate some advise or link or topics/ direction I have to research, because I can’t find an answer about how to structure this well.
I just use html, css and js without any framework or library.
initDictionary();
async function initDictionary(){
//get data
const dictionary = await getData();
//fill html list with words
fillList(dictionary);
}
//show translation and info when click on word
show = async function (i){
let dictionary = await getData();
document.getElementById("word-text").innerHTML = dictionary[i].Wort;
document.getElementById("info").innerHTML = dictionary[i].Notizen;
}
//search stuff
search = async function() {
let dictionary = await getData();
let query = document.getElementById('search').value;
console.log(query);
if (query == ""){
return;
}
//init found to false
let found = -1;
for(let i=0; i< dictionary.length; i++){
if(query == dictionary[i].Übersetzung){
found = i;
break;
}else {
document.getElementById("word-text").innerHTML = "word not found";
document.getElementById("info").innerHTML ="";
}
}
if ( found >= 0){
show (found);
query = document.getElementById('search').value="";
}
}
//Start search when u press enter
let input = document.getElementById("search");
input.addEventListener("keyup", function(event) {
console.log(event);
if (event.key=== "Enter") {
search();
}
});
// get data
async function getData(){
const csv = await fetch('https://aboutwhite.github.io/data/data.csv');
let scvText = await csv.text();
let dictionary = csvToArray(scvText);
return dictionary;
}
// fill html list with words
function fillList(dictionary){
for(let i=0; i< dictionary.length; i++){
document.getElementById('word-list').innerHTML += "<li onclick='show("+i+")'>" + dictionary[i].Übersetzung+"</li>";
}
}
//parse csv to array
function csvToArray(str){
let delimiter = ","
const headers = str.slice(0, str.indexOf("\n")).split(delimiter);
const rows = str.slice(str.indexOf("\n") + 1).split("\n");
const arr = rows.map(function (row) {
const values = row.split(delimiter);
const el = headers.reduce(function (object, header, index) {
object[header] = values[index];
return object;
}, {});
return el;
});
return arr;
}
var listUsers= [];
for(let item of list){
var profile = await getOne(item.updatedBy);
var gettedUsers = await User.find(queryData).populate({path: "profiles"});
var users = gettedUsers.filter(user => user._id !== profile._id);
if(users) {
for(let gettedUser of users) {
if(!listUsers.includes(gettedUser.profile._id)){
listUsers.push(gettedUser.profile._id);
// do some stuff for the getted user
}
}
}
}
console.log(listUsers); // i get duplicated users
I had added this array list 'listUsers' to filter users and then for each one of them i can do some stuff, but the problem is that i get duplicated users.
Someone could help me ?
The solution is that I changed :
listUsers.includes(gettedUser.profile._id)
to :
var contains = (list, element) => list.some(elem =>{
return JSON.stringify(element) === JSON.stringify(elem);
});
I really don't know waht's the problem but i think I was comparing objects instead of strings. Anyway this solved it ;)
I'm performing mysql query using nodejs/mysql.
After the first result set, I will loop through the results set and query a second table.
1) Why 'for' works and 'foreach' doesn't? What's the proper looping way to achieve what I need?
2) item = { ...item, images: rows } in the getImage function also doesn't work, why?
3) How to let the console.log show the modified results? If I use 'await', the console.log(rows) should show the modified results right?
const getImages = async (item, key) => {
let sql = await connection.format('SELECT * from `images` WHERE id = ?', [item.id]);
const [ rows , fields ] = await connection.execute(sql);
item['images'] = rows
item = { ...item, images: rows } //'<-- this method doesn't work.
return item
}
let sql = await connection.format(`SELECT * from table ORDER BY a.listing_id LIMIT ?,?`, [0,10])
var [rows, fields] = await connection.execute(sql);
// rows.forEach(getImages) //'<-- this does not work when uncommented
// rows = rows.forEach(getImages) //'<-- this also does not work when uncommented.
for (let i = 0; i < rows.length; i++) { //'<-- but this works
rows[i] = await getImages(rows[i], i);
}
console.log(rows) //<----- this doesn't show modified results on terminal console
res.json(rows) //<----- browser can see the modified results on browser console
You have to pass to the foreach method the proper handler on each item:
let new_rows = Array()
rows.forEach(row => {
new_rows.push(await getImages(row, i))
});
Plus, if you want to get the images on another array you should use map, its cleaner:
let new_rows = rows.map(row => {
return await getImages(row, i)
});
Because forEach not returning anything .So better use Array#map
rows = rows.map(getImages)
I am using an API from Caspio to import a Data Table that will be variable.
for that, I am doing the following
<script type="text/javascript" id='Test' src="https://c1afw487.caspio.com/dp/6e444000877ca58e63624b0b8c78/emb"></script>
and then to format it (send it to the bottom of my web page) I am doing this:
<div id='InfoTable' style='width: 40%; float: left;'>
<a id='TestTwo' href="https://c1afw487.caspio.com/dp/6e444000877ca58e63624b0b8c78">DataTable </a>
</div>
Now, I am trying to access the data from the table. For that I am trying something like this
var DataTest = document.getElementById('Test');
var DataTestTwo = document.getElementById('TestTwo');
console.log(JSON.stringify(DataTest));
console.log(JSON.stringify(DataTestTwo));
But the first test returns { } and the second one null (notice how I tried to give an ID to the imported table so I could access it but any of my attempts worked).
What is the proper way to access the Table?
I dont know anything about that specific API but quick google seems to suggest that they have a separate rest api for requesting JSON data. You should look into that.
Stringifying an html element does nothing usefull...its an html element not your request payload data.
You can go over the table itself and extract all the contents into a json.
Something like this.
https://jsfiddle.net/rainerpl/wvdoek03/14/
var getHeaders = (table) => {
const headerRow = table.tBodies[0].children[0];
const headers = [];
let i;
for (i = 0; i < headerRow.children.length; i++) {
headers.push(headerRow.children[i].innerText);
}
return headers;
}
var getData = (table) => {
const data = [];
let i;
for (i = 1; i < table.tBodies[0].children.length; i++) {
let newDataRow = [];
for (j = 0; j < table.tBodies[0].children[i].children.length; j++) {
newDataRow.push(table.tBodies[0].children[i].children[j].innerText);
}
data.push(newDataRow);
}
return data;
}
JsonTable = function() {
const table = document.getElementsByTagName('table')[0];
const headers = getHeaders(table);
const data = getData(table);
this.getRow = (rowNr) => {
const result = {};
headers.forEach((key, index) => {
result[key] = data[rowNr][index];
});
return result;
}
console.log('table', table, 'has data:', data, ' and headers ', headers);
}
const jsonTable = new JsonTable();
console.log('First row is', jsonTable.getRow(0));
console.log('Second row is', jsonTable.getRow(1));
You can view the console output on jsFiddle to see what it looks like.
( use inspect developer tool to see console output )