const apiUrl2 = `https://api.quran.com/api/v4/verses/random?language=en&words=true&translations=en&audio=1&tafsirs=en`;
fetch(apiUrl2)
.then((response) => response.json())
.then(data => {
console.log(data);
for (let i = 0; i < data.verse.words.length; i ) {
// var result = Object.values(data.words[i]);
let datas = data.verse.words[i];
console.log(datas.translation.text);
// console.log(datas.sort());
let sorted=datas.position;
const propertyNames=Object.keys(sorted);
console.log(sorted);
// console.log(result.sort());
// document.getElementById('hadithNumber').innerHTML = ' ' sorted.sort();
// if (datas.position <= i) {
// let ayah = [];
// ayah.push();
// console.log(ayah[i]);
// }
}
})
.catch(error => {
console.log(error);
});So Basically, I've this API to fetch Holy Quran Ayat/Verses in this API we have a key called Position according to which the words has to be shown to make the Ayat complete. JSON
"verse": {
"id": 5890,
"verse_number": 6,
"verse_key": "84:6",
"hizb_number": 59,
"rub_el_hizb_number": 236,
"ruku_number": 528,
"manzil_number": 7,
"sajdah_number": null,
"page_number": 589,
"juz_number": 30,
"words": [
{
"id": 6721,
"position": 2,
"audio_url": "wbw/084_006_002.mp3",
"char_type_name": "word",
"code_v1": "ﭲ",
"page_number": 589,
"line_number": 6,
"text": "ﭲ",
"translation": {
"text": "mankind",
"language_name": "english"
},
"transliteration": {
"text": "l-insānu",
"language_name": "english"
}
},
{
"id": 6722,
"position": 3,
"audio_url": "wbw/084_006_003.mp3",
"char_type_name": "word",
"code_v1": "ﭳ",
"page_number": 589,
"line_number": 6,
"text": "ﭳ",
"translation": {
"text": "Indeed, you",
"language_name": "english"
},
"transliteration": {
"text": "innaka",
"language_name": "english"
}
},
{
"id": 6723,
"position": 4,
"audio_url": "wbw/084_006_004.mp3",
"char_type_name": "word",
"code_v1": "ﭴ",
"page_number": 589,
"line_number": 6,
"text": "ﭴ",
"translation": {
"text": "(are) laboring",
"language_name": "english"
},
"transliteration": {
"text": "kādiḥun",
"language_name": "english"
}
},....}
As you can see in the response in words array we have a key called position we need to use that key to sort it and add text based on its value This is what I've tried till now.
CodePudding user response：
You can create your own comparison function.
function compare(a, b) {
return a.position - b.position;
}
const apiUrl2 = `https://api.quran.com/api/v4/verses/random?language=en&words=true&translations=en&audio=1&tafsirs=en`;
fetch(apiUrl2)
.then((response) => response.json())
.then(data => {
console.log(data);
data.verse.words.sort(compare);
for (let i = 0; i < data.verse.words.length; i ) {
// var result = Object.values(data.words[i]);
let datas = data.verse.words[i];
console.log(datas.translation.text);
// console.log(datas.sort());
let sorted = datas.position;
const propertyNames = Object.keys(sorted);
console.log(sorted);
// console.log(result.sort());
// document.getElementById('hadithNumber').innerHTML = ' ' sorted.sort();
// if (datas.position <= i) {
// let ayah = [];
// ayah.push();
// console.log(ayah[i]);
// }
}
})
.catch(error => {
console.log(error);
});CodePudding user response：
sort the words array before looping through it with array.sort()
here's an example below:
const array = [
{text: "John", position: 34},
{text: "Peter", position: 54},
{text: "Jake", position: 25},
{text: "Jolly", position: 2},
];
let sorted_array = array.sort(function(a, b) {
return a.position - b.position; // sorts the "words" array based on the value of "position"
});
console.log(sorted_array)now you can run your loop with the new sorted_array
CodePudding user response：
Try Below
const list = data.verse.words;
list.sort((a,b) => a.position - b.position);
const orderedTextArray = list.map((wordModel) => wordModel.translation.text);
const result = orderedTextArray.join(' ');
CodePudding user response：
const orderlist = document.getElementById("orderlist");
const Hakupalkki = document.getElementById("Hakupalkki");
let orderid = [];
Hakupalkki.addEventListener("keyup", (e) => {
const searchString = e.target.value.toLowerCase();
console.log(orderid);
const filteredObjects = orderid.filter((orderid) => {
// in case of orderid lower case is not required because it is a number
return (
orderid.customer.toLowerCase().includes(searchString) ||
orderid.orderid.includes(searchString)
);
});
printTable(document.querySelector("table"), filteredObjects);
});
// for searching i prefer to create seprate function for print table
function printTable(table, data) {
const tableHead = table.querySelector("thead");
const tableBody = table.querySelector("tbody");
//puhdista
tableHead.innerHTML = "<tr></tr>";
tableBody.innerHTML = "";
// lollero
for (const headerText in data[0]) {
const HeaderElement = document.createElement("th");
HeaderElement.textContent = headerText;
tableHead.querySelector("tr").appendChild(HeaderElement);
}
function createCell(tr, value) {
const cell = document.createElement("td");
cell.textContent = value;
tr.appendChild(cell);
}
for (const row of data) {
const tr = document.createElement("tr");
createCell(tr, row.orderid);
createCell(tr, row.customerid);
createCell(tr, row.customer);
createCell(tr, row.invaddr);
createCell(tr, row.delivaddr);
createCell(tr, row.deliverydate);
createCell(tr, row.respsalesperson);
createCell(tr, row.comment);
createCell(tr, row.totalprice);
for (const row of data) {
for (const product of row.products) {
//good logic per-product??
}
}
tableBody.appendChild(tr);
}
}
async function loadIntoTable(url, table) {
const response = await fetch(url);
const data = await response.json();
console.log(data);
printTable(table, data);
orderid = data; // is require to comnpare data
}
loadIntoTable(
"https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py",
document.querySelector("table")
);
CodePudding user response：
I think Array.sort() is what you're looking for
//this snippet comes from the above page, credit goes to its author
const items = [
{ name: "Edward", value: 21 },
{ name: "Sharpe", value: 37 },
{ name: "And", value: 45 },
{ name: "The", value: -12 },
{ name: "Magnetic", value: 13 },
{ name: "Zeros", value: 37 },
];
// sort by value
items.sort((a, b) => a.value - b.value);
// sort by name
items.sort((a, b) => {
const nameA = a.name.toUpperCase(); // ignore upper and lowercase
const nameB = b.name.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});