如何使用for循环从对象中获取多个项

Question

我有下面附加的对象--它有三个属性标题，pagesids & snippets，使用for循环--如何在html中将属性的值添加到另一个下面

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,

目前，使用for循环，我能够每次只能访问一个，例如，标题，现在在它下面添加代码段和页面，我能做什么&这也是访问我对Javascript陌生的对象的正确方法吗？

const datap = object;
 var titl = datap.Titles;
  titl.forEach(x => {
  const li = document.createElement("li");
  li.innerText = x;
  document.getElementById("res").appendChild(li);

   });

对象

{
    "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 &quot;Isle of <span class=\"searchmatch\">France</span>&quot;) 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
    ]
}

Answer 1

在forEach循环中使用索引

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);
    });

试试这个：

​

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 &quot;Isle of <span class=\"searchmatch\">France</span>&quot;) 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>

​

Answer 2

您可以使用for循环轻松地做到这一点：

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);
}

Answer 3

你可以用地图来做这个。

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);
});