I have the below attached object it has three properties Titles,pagesids & snippets , using for loop how can I add the values of properties one below the other in html like
France
Coordinates: 47°N 2°E / 47°N 2°E / 47; 2 <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: [fʁɑ̃s] ), officially the <span class=\"searchmatch\">French</span> Republic (<span class=\"searchmatch\">French</span>: République française), is a transcontinental",
"Standard <span class=\"searchmatch\">
5843419,
Currently with for loop i am able to acces only one at a time for example title now to add snippet & pageid below it wht can i do & also is this the correct approach for accessing objects i am new to Javascript
const datap = object;
var titl = datap.Titles;
titl.forEach(x => {
const li = document.createElement("li");
li.innerText = x;
document.getElementById("res").appendChild(li);
});
Object
{
"Titles": [
"France",
"French of France",
"French cuisine",
"French",
"French colonial empire",
"Vichy France",
"Overseas France",
"List of French monarchs",
"President of France",
"France national football team",
"Departments of France",
"Free France",
"Flag of France",
"Île-de-France",
"Henry IV of France",
"New France",
"Battle of France",
"Air France",
"France 24",
"Kingdom of France"
],
"Snippets": [
"Coordinates: 47°N 2°E / 47°N 2°E / 47; 2 <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: [fʁɑ̃s] ), officially the <span class=\"searchmatch\">French</span> Republic (<span class=\"searchmatch\">French</span>: République française), is a transcontinental",
"Standard <span class=\"searchmatch\">French</span>. It is now seen as a variety of <span class=\"searchmatch\">French</span> alongside Acadian <span class=\"searchmatch\">French</span>, Belgian <span class=\"searchmatch\">French</span>, Quebec <span class=\"searchmatch\">French</span>, Swiss <span class=\"searchmatch\">French</span>, etc. In overseas <span class=\"searchmatch\">France</span> or Corsica",
"<span class=\"searchmatch\">French</span> cuisine (<span class=\"searchmatch\">French</span>: Cuisine française) consists of the cooking traditions and practices from <span class=\"searchmatch\">France</span>. <span class=\"searchmatch\">French</span> cuisine developed throughout the centuries",
"<span class=\"searchmatch\">French</span> (<span class=\"searchmatch\">French</span>: français(e)) may refer to: Something of, from, or related to <span class=\"searchmatch\">France</span> <span class=\"searchmatch\">French</span> language, which originated in <span class=\"searchmatch\">France</span>, and its various dialects",
"The <span class=\"searchmatch\">French</span> colonial empire (<span class=\"searchmatch\">French</span>: Empire colonial français) comprised the overseas colonies, protectorates and mandate territories that came under French",
"400°E / 46.167; 3.400 Vichy <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: Régime de Vichy; 10 July 1940 – 9 August 1944) is the common name of the <span class=\"searchmatch\">French</span> State (État français) headed",
"Overseas <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: <span class=\"searchmatch\">France</span> d'outre-mer) consists of thirteen <span class=\"searchmatch\">French</span>-administered territories outside Europe, mostly the remains of the <span class=\"searchmatch\">French</span> colonial",
"of the Kingdom of <span class=\"searchmatch\">France</span> ruled from the establishment of the Kingdom of the West Franks in 843 until the fall of the Second <span class=\"searchmatch\">French</span> Empire in 1870, with",
"president of <span class=\"searchmatch\">France</span>, officially the President of the <span class=\"searchmatch\">French</span> Republic (<span class=\"searchmatch\">French</span>: Président de la République française), is the head of state of <span class=\"searchmatch\">France</span>, as well",
"The <span class=\"searchmatch\">France</span> national football team (<span class=\"searchmatch\">French</span>: Équipe de <span class=\"searchmatch\">France</span> de football) represents <span class=\"searchmatch\">France</span> in men's international football and is controlled by the French",
"In the administrative divisions of <span class=\"searchmatch\">France</span>, the department (<span class=\"searchmatch\">French</span>: département, pronounced [depaʁtəmɑ̃]) is one of the three levels of government under",
"Free <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: <span class=\"searchmatch\">France</span> Libre) was the government-in-exile led by <span class=\"searchmatch\">French</span> general Charles de Gaulle in the Second World War. Established in London",
"The national flag of <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: drapeau français) is a tricolour flag featuring three vertical bands coloured blue (hoist side), white, and red. It",
"Île-de-<span class=\"searchmatch\">France</span> (/ˌiːl də ˈfrɒ̃s/, <span class=\"searchmatch\">French</span>: [il də fʁɑ̃s] (listen); literally "Isle of <span class=\"searchmatch\">France</span>") is the most populous of the eighteen regions of <span class=\"searchmatch\">France</span>. Centred",
"Henry IV (<span class=\"searchmatch\">French</span>: Henri IV; 13 December 1553 – 14 May 1610), also known by the epithet Good King Henry or Henry the Great, was King of Navarre (as Henry",
"New <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: Nouvelle-<span class=\"searchmatch\">France</span>) was the area colonized by <span class=\"searchmatch\">France</span> in North America, beginning with the exploration of the Gulf of Saint Lawrence by",
"The Battle of <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: bataille de <span class=\"searchmatch\">France</span>) (10 May – 25 June 1940) also known as the Western Campaign (Westfeldzug) the <span class=\"searchmatch\">French</span> Campaign, (German:",
"Air <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span> pronunciation: [ɛːʁ fʁɑ̃s]; formally Société Air <span class=\"searchmatch\">France</span>, S.A.), stylised as AIRFRANCE, is the flag carrier of <span class=\"searchmatch\">France</span> headquartered",
"<span class=\"searchmatch\">France</span> 24 (<span class=\"searchmatch\">France</span> vingt-quatre in <span class=\"searchmatch\">French</span>, <span class=\"searchmatch\">France</span> veinticuatro in Spanish) is a <span class=\"searchmatch\">French</span> state-owned international news television network based in Paris",
"The Kingdom of <span class=\"searchmatch\">France</span> (Old <span class=\"searchmatch\">French</span>: Reaume de <span class=\"searchmatch\">France</span>; Middle <span class=\"searchmatch\">French</span>: Royaulme de <span class=\"searchmatch\">France</span>; <span class=\"searchmatch\">French</span>: Royaume de <span class=\"searchmatch\">France</span>) is the historiographical name or umbrella"
],
"Pageids": [
5843419,
40192504,
11002,
10676,
216862,
20599016,
30876968,
62519,
24899,
250197,
38523,
145516,
70764,
1716427,
57876,
159828,
228080,
14998012,
1263244,
2687967
]
}
CodePudding user response：
In forEach loop Use Index
datap.Titles.forEach((data, index) => {
const li = document.createElement("li");
li.innerText = `${datap.Titles[index]}, ${datap.Snippets[index]}, ${datap.Pageids[index]}`;
document.getElementById("res").appendChild(li);
});
Try This:
const datap = {
"Titles": [
"France",
"French of France",
"French cuisine",
"French",
"French colonial empire",
"Vichy France",
"Overseas France",
"List of French monarchs",
"President of France",
"France national football team",
"Departments of France",
"Free France",
"Flag of France",
"Île-de-France",
"Henry IV of France",
"New France",
"Battle of France",
"Air France",
"France 24",
"Kingdom of France"
],
"Snippets": [
"Coordinates: 47°N 2°E / 47°N 2°E / 47; 2 <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: [fʁɑ̃s] ), officially the <span class=\"searchmatch\">French</span> Republic (<span class=\"searchmatch\">French</span>: République française), is a transcontinental",
"Standard <span class=\"searchmatch\">French</span>. It is now seen as a variety of <span class=\"searchmatch\">French</span> alongside Acadian <span class=\"searchmatch\">French</span>, Belgian <span class=\"searchmatch\">French</span>, Quebec <span class=\"searchmatch\">French</span>, Swiss <span class=\"searchmatch\">French</span>, etc. In overseas <span class=\"searchmatch\">France</span> or Corsica",
"<span class=\"searchmatch\">French</span> cuisine (<span class=\"searchmatch\">French</span>: Cuisine française) consists of the cooking traditions and practices from <span class=\"searchmatch\">France</span>. <span class=\"searchmatch\">French</span> cuisine developed throughout the centuries",
"<span class=\"searchmatch\">French</span> (<span class=\"searchmatch\">French</span>: français(e)) may refer to: Something of, from, or related to <span class=\"searchmatch\">France</span> <span class=\"searchmatch\">French</span> language, which originated in <span class=\"searchmatch\">France</span>, and its various dialects",
"The <span class=\"searchmatch\">French</span> colonial empire (<span class=\"searchmatch\">French</span>: Empire colonial français) comprised the overseas colonies, protectorates and mandate territories that came under French",
"400°E / 46.167; 3.400 Vichy <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: Régime de Vichy; 10 July 1940 – 9 August 1944) is the common name of the <span class=\"searchmatch\">French</span> State (État français) headed",
"Overseas <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: <span class=\"searchmatch\">France</span> d'outre-mer) consists of thirteen <span class=\"searchmatch\">French</span>-administered territories outside Europe, mostly the remains of the <span class=\"searchmatch\">French</span> colonial",
"of the Kingdom of <span class=\"searchmatch\">France</span> ruled from the establishment of the Kingdom of the West Franks in 843 until the fall of the Second <span class=\"searchmatch\">French</span> Empire in 1870, with",
"president of <span class=\"searchmatch\">France</span>, officially the President of the <span class=\"searchmatch\">French</span> Republic (<span class=\"searchmatch\">French</span>: Président de la République française), is the head of state of <span class=\"searchmatch\">France</span>, as well",
"The <span class=\"searchmatch\">France</span> national football team (<span class=\"searchmatch\">French</span>: Équipe de <span class=\"searchmatch\">France</span> de football) represents <span class=\"searchmatch\">France</span> in men's international football and is controlled by the French",
"In the administrative divisions of <span class=\"searchmatch\">France</span>, the department (<span class=\"searchmatch\">French</span>: département, pronounced [depaʁtəmɑ̃]) is one of the three levels of government under",
"Free <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: <span class=\"searchmatch\">France</span> Libre) was the government-in-exile led by <span class=\"searchmatch\">French</span> general Charles de Gaulle in the Second World War. Established in London",
"The national flag of <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: drapeau français) is a tricolour flag featuring three vertical bands coloured blue (hoist side), white, and red. It",
"Île-de-<span class=\"searchmatch\">France</span> (/ˌiːl də ˈfrɒ̃s/, <span class=\"searchmatch\">French</span>: [il də fʁɑ̃s] (listen); literally "Isle of <span class=\"searchmatch\">France</span>") is the most populous of the eighteen regions of <span class=\"searchmatch\">France</span>. Centred",
"Henry IV (<span class=\"searchmatch\">French</span>: Henri IV; 13 December 1553 – 14 May 1610), also known by the epithet Good King Henry or Henry the Great, was King of Navarre (as Henry",
"New <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: Nouvelle-<span class=\"searchmatch\">France</span>) was the area colonized by <span class=\"searchmatch\">France</span> in North America, beginning with the exploration of the Gulf of Saint Lawrence by",
"The Battle of <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span>: bataille de <span class=\"searchmatch\">France</span>) (10 May – 25 June 1940) also known as the Western Campaign (Westfeldzug) the <span class=\"searchmatch\">French</span> Campaign, (German:",
"Air <span class=\"searchmatch\">France</span> (<span class=\"searchmatch\">French</span> pronunciation: [ɛːʁ fʁɑ̃s]; formally Société Air <span class=\"searchmatch\">France</span>, S.A.), stylised as AIRFRANCE, is the flag carrier of <span class=\"searchmatch\">France</span> headquartered",
"<span class=\"searchmatch\">France</span> 24 (<span class=\"searchmatch\">France</span> vingt-quatre in <span class=\"searchmatch\">French</span>, <span class=\"searchmatch\">France</span> veinticuatro in Spanish) is a <span class=\"searchmatch\">French</span> state-owned international news television network based in Paris",
"The Kingdom of <span class=\"searchmatch\">France</span> (Old <span class=\"searchmatch\">French</span>: Reaume de <span class=\"searchmatch\">France</span>; Middle <span class=\"searchmatch\">French</span>: Royaulme de <span class=\"searchmatch\">France</span>; <span class=\"searchmatch\">French</span>: Royaume de <span class=\"searchmatch\">France</span>) is the historiographical name or umbrella"
],
"Pageids": [
5843419,
40192504,
11002,
10676,
216862,
20599016,
30876968,
62519,
24899,
250197,
38523,
145516,
70764,
1716427,
57876,
159828,
228080,
14998012,
1263244,
2687967
]
}
datap.Titles.forEach((data, index) => {
const li = document.createElement("li");
li.innerText = `${datap.Titles[index]}, ${datap.Snippets[index]}, ${datap.Pageids[index]}`;
document.getElementById("res").appendChild(li);
}); <ul id="res"></ul>CodePudding user response：
You can do this easily with a for loop:
for (let i = 0; i < object.Titles.length; i ) {
const li = document.createElement("li");
li.innerHTML = "<p>" object.Titles[i] "</p><p>" object.Snippets[i] "</p><p>" object.Pageids[i] "</p>";
document.getElementById("res").appendChild(li);
}
CodePudding user response：
You can use map for this.
datap.Titles.map((a, i) => {
const li = document.createElement("li");
li.innerText = a;
li.innerText = datap.Snippets[i] || "";
li.innerText = datap.Pageids[i] || "";
document.getElementById("res").appendChild(li);
});