将嵌套的 JSON 数据加载到 HTML <UL> <LI> 列表....>

Question

首先，环境：

节点js
快递
mySQL
普通旧 Javascript（未使用框架）

我正在从 MySQL 数据库中读取按国家/地区划分的 F1 赛道列表，在 JSON 中获取输出，我想将数据加载到 HTML 页面中在客户端使用 javascript，这是所需的格式：

国家：
- 赛道名称
- 赛道 2 名称
国家 2：
- 赛道名称
国家 3： [如果不存在曲目则不显示任何内容]

一些国家根本没有赛道，一些国家有 1 条赛道，而其他国家有几个赛道，如我的 SQL 查询的 JSON 输出所示：

如图所示，索引0的国家没有轨道，索引10的国家有1个轨道，索引14的国家有超过1个轨道。

我停留在将 JSON 数据读入循环并将其加载到页面中的适当

元素中以显示如上所示（包括嵌套）。

我遇到的问题是我无法理解如何阅读这种 JSON 格式，因为它不是我从其他查询中收到的正常格式。我在每一行的开头都得到了所有这些额外的“国家/地区：”标签，实际数据充满了 \ 所以我不知道如何阅读它。我试过 .stringify，我试过 .parse，但不能在变量中提取国家名称或曲目名称。

我定义了以下事件监听器和函数：

// Add an event listener to load the sidebar with the list of F1 Circuits once the DOM has completed loading
document.addEventListener('DOMContentLoaded', function () {
    fetch('http://192.168.68.102:3000/loadF1Circuits')
    .then(response => response.json())
    .then(responseData => loadCircuits(responseData['data']));
  });


  
  function loadCircuits(circuitsList) {
    const circuitsUL_List = document.querySelector("#circuits");
    let htmlToLoad = "";

    for (const racingEvent of circuitsList) {
  
    }
    circuitsUL_List.innerHTML=htmlToLoad;
  }

这是我的 SQL 查询，目的是获取按国家/地区嵌套的数据：

    async getAllCircuitsByCountry() {
        try {
            const response = await new Promise((resolve, reject) => {
                const query = 
                `
                select  json_object (
                            'Country', Countries.cnt_name,
                            'circuits', (select cast(concat('[', GROUP_CONCAT(json_object('Circuits_ID', Circuits.crt_ID, 'Circuit_name', Circuits.crt_name)),']')  as JSON) 
                                        FROM    Circuits 
                                        WHERE   Countries.cnt_name = Circuits.crt_country_name)) 
                            as Country 
                FROM    Countries
                ORDER BY Countries.cnt_name;`;

                connection.query(query, (err, results) => {
                    if (err) reject(new Error(err.message));
                    resolve(results);
                })
            });
            return response;
        } catch (error) {
            console.log(error);
        };
    };

这是我在回答下面的评论时得到的 JSON 数据，数组有 264 个对象这么长，这就是为什么我没有首先粘贴整个输出但显示了一个屏幕改为在顶部射击：

{"data":[{"Country":"{\"Country\": \"Afghanistan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Aland Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Albania\", \"circuits\": null}"},{"Country":"{\"Country\": \"Algeria\", \"circuits\": null}"},{"Country":"{\"Country\": \"American Samoa\", \"circuits\": null}"},{"Country":"{\"Country\": \"Andorra\", \"circuits\": null}"},{"Country":"{\"Country\": \"Angola\", \"circuits\": null}"},{"Country":"{\"Country\": \"Anguilla\", \"circuits\": null}"},{"Country":"{\"Country\": \"Antarctica\", \"circuits\": null}"},{"Country":"{\"Country\": \"Antigua and Barbuda\", \"circuits\": null}"},{"Country":"{\"Country\": \"Argentina\", \"circuits\": [{\"Circuits_ID\": 25, \"Circuit_name\": \"Autódromo Juan y Oscar Gálvez\"}]}"},{"Country":"{\"Country\": \"Armenia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Aruba\", \"circuits\": null}"},{"Country":"{\"Country\": \"Ascension Island\", \"circuits\": null}"},{"Country":"{\"Country\": \"Australia\", \"circuits\": [{\"Circuits_ID\": 1, \"Circuit_name\": \"Albert Park Grand Prix Circuit\"}, {\"Circuits_ID\": 29, \"Circuit_name\": \"Adelaide Street Circuit\"}]}"},{"Country":"{\"Country\": \"Austria\", \"circuits\": [{\"Circuits_ID\": 23, \"Circuit_name\": \"A1-Ring\"}, {\"Circuits_ID\": 57, \"Circuit_name\": \"Zeltweg\"}, {\"Circuits_ID\": 70, \"Circuit_name\": \"Red Bull Ring\"}]}"},{"Country":"{\"Country\": \"Azerbaijan\", \"circuits\": [{\"Circuits_ID\": 73, \"Circuit_name\": \"Baku City Circuit\"}]}"},{"Country":"{\"Country\": \"Bahamas\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bahrain\", \"circuits\": [{\"Circuits_ID\": 3, \"Circuit_name\": \"Bahrain International Circuit\"}]}"}"}]}

通过如下更改我的 SQL 查询：

                SELECT      Countries.cnt_name, Circuits.crt_name
                FROM        Countries
                LEFT JOIN   Circuits
                ON          Countries.cnt_name = Circuits.crt_country_name
                ORDER BY    Countries.cnt_name;`;

我得到了不同的 JSON 格式，但是如果一个国家有不止一次的轨道，我会得到同一个国家的几个对象，按照这个 JSON 输出：

{"data":[{"cnt_name":"Afghanistan","crt_name":null},{"cnt_name":"Aland Islands","crt_name":null},{"cnt_name":"Albania","crt_name":null},{"cnt_name":"Algeria","crt_name":null},{"cnt_name":"American Samoa","crt_name":null},{"cnt_name":"Andorra","crt_name":null},{"cnt_name":"Angola","crt_name":null},{"cnt_name":"Anguilla","crt_name":null},{"cnt_name":"Antarctica","crt_name":null},{"cnt_name":"Antigua and Barbuda","crt_name":null},{"cnt_name":"Argentina","crt_name":"Autódromo Juan y Oscar Gálvez"},{"cnt_name":"Armenia","crt_name":null},{"cnt_name":"Aruba","crt_name":null},{"cnt_name":"Ascension Island","crt_name":null},{"cnt_name":"Australia","crt_name":"Albert Park Grand Prix Circuit"},{"cnt_name":"Australia","crt_name":"Adelaide Street Circuit"},{"cnt_name":"Austria","crt_name":"A1-Ring"},{"cnt_name":"Austria","crt_name":"Zeltweg"},{"cnt_name":"Austria","crt_name":"Red Bull Ring"},{"cnt_name":"Azerbaijan","crt_name":"Baku City Circuit"},{"cnt_name":"Bahamas","crt_name":null},{"cnt_name":"Bahrain","crt_name":"Bahrain International Circuit"}

有人能给我指出正确的方向吗，请教如何从 JSON 输出中读取数据。

提前谢谢你。 M.

Answer 1

JSON.parse 在这里可以方便地将数据解释为对象。完成后，您可以遍历添加到主要 <ul> 的国家/地区列表。如果电路列表不是 null，请创建一个新的 <ul> 并将电路名称附加到该列表。

const data = [{
    "Country": "{\"Country\": \"Aruba\", \"circuits\": null}"
  },
  {
    "Country": "{\"Country\": \"Ascension Island\", \"circuits\": null}"
  },
  {
    "Country": "{\"Country\": \"Australia\", \"circuits\": [{\"Circuits_ID\": 1, \"Circuit_name\": \"Albert Park Grand Prix Circuit\"}, {\"Circuits_ID\": 29, \"Circuit_name\": \"Adelaide Street Circuit\"}]}"
  },
  {
    "Country": "{\"Country\": \"Austria\", \"circuits\": [{\"Circuits_ID\": 23, \"Circuit_name\": \"A1-Ring\"}, {\"Circuits_ID\": 57, \"Circuit_name\": \"Zeltweg\"}, {\"Circuits_ID\": 70, \"Circuit_name\": \"Red Bull Ring\"}]}"
  },
  {
    "Country": "{\"Country\": \"Azerbaijan\", \"circuits\": [{\"Circuits_ID\": 73, \"Circuit_name\": \"Baku City Circuit\"}]}"
  },
  {
    "Country": "{\"Country\": \"Bahamas\", \"circuits\": null}"
  },
];

const outerList = document.getElementById("outerList");

data.forEach(country => {
  // parse the JSON string into an object
  const countryData = JSON.parse(country.Country);
  const countryEntry = document.createElement("li");
  countryEntry.textContent = countryData.Country;
  outerList.appendChild(countryEntry);
  
  // create circuit list if it is non-null
  if (countryData.circuits != null) {
    const innerList = document.createElement("ul");
    outerList.appendChild(innerList);
    countryData.circuits.forEach(circuit => {
      const circuitEntry = document.createElement("li");
      circuitEntry.textContent = circuit.Circuit_name;
      innerList.appendChild(circuitEntry);
    });
  }
});

<ul id="outerList"></ul>

Answer 2

这是我使用 template literals

的版本

您可以通过返回正确的 JSON 数据而不是嵌套的 JSON 字符串来改进这一点。

我可以通过替换各种东西来绕过它

在服务器上修复 JSON 后删除前两行

jsonString = jsonString.replaceAll(/\/g,"").replaceAll(/"{/g,"{").replaceAll(/}"}/g,"}}")
const circuitsList = JSON.parse(jsonString).data;
document.getElementById("circuits").innerHTML = circuitsList.map(({Country}) => {
  const [country, circuits] = Object.values(Country);
  const circuitUl = circuits && circuits.length ?  `<ul>${circuits.map(circuit=>`<li>${circuit.Circuit_name}</li>`).join('')}</ul>` : '';
  return `<li>${country} ${circuitUl}</li>`
  }).join("");

<ul id="circuits"></ul>
<script>let jsonString = `{"data":[{"Country":"{\"Country\": \"Afghanistan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Aland Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Albania\", \"circuits\": null}"},{"Country":"{\"Country\": \"Algeria\", \"circuits\": null}"},{"Country":"{\"Country\": \"American Samoa\", \"circuits\": null}"},{"Country":"{\"Country\": \"Andorra\", \"circuits\": null}"},{"Country":"{\"Country\": \"Angola\", \"circuits\": null}"},{"Country":"{\"Country\": \"Anguilla\", \"circuits\": null}"},{"Country":"{\"Country\": \"Antarctica\", \"circuits\": null}"},{"Country":"{\"Country\": \"Antigua and Barbuda\", \"circuits\": null}"},{"Country":"{\"Country\": \"Argentina\", \"circuits\": [{\"Circuits_ID\": 25, \"Circuit_name\": \"Autódromo Juan y Oscar Gálvez\"}]}"},{"Country":"{\"Country\": \"Armenia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Aruba\", \"circuits\": null}"},{"Country":"{\"Country\": \"Ascension Island\", \"circuits\": null}"},{"Country":"{\"Country\": \"Australia\", \"circuits\": [{\"Circuits_ID\": 1, \"Circuit_name\": \"Albert Park Grand Prix Circuit\"}, {\"Circuits_ID\": 29, \"Circuit_name\": \"Adelaide Street Circuit\"}]}"},{"Country":"{\"Country\": \"Austria\", \"circuits\": [{\"Circuits_ID\": 23, \"Circuit_name\": \"A1-Ring\"}, {\"Circuits_ID\": 57, \"Circuit_name\": \"Zeltweg\"}, {\"Circuits_ID\": 70, \"Circuit_name\": \"Red Bull Ring\"}]}"},{"Country":"{\"Country\": \"Azerbaijan\", \"circuits\": [{\"Circuits_ID\": 73, \"Circuit_name\": \"Baku City Circuit\"}]}"},{"Country":"{\"Country\": \"Bahamas\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bahrain\", \"circuits\": [{\"Circuits_ID\": 3, \"Circuit_name\": \"Bahrain International Circuit\"}]}"},{"Country":"{\"Country\": \"Bangladesh\", \"circuits\": null}"},{"Country":"{\"Country\": \"Barbados\", \"circuits\": null}"},{"Country":"{\"Country\": \"Belarus\", \"circuits\": null}"},{"Country":"{\"Country\": \"Belgium\", \"circuits\": [{\"Circuits_ID\": 13, \"Circuit_name\": \"Circuit de Spa-Francorchamps\"}, {\"Circuits_ID\": 40, \"Circuit_name\": \"Zolder\"}, {\"Circuits_ID\": 50, \"Circuit_name\": \"Nivelles-Baulers\"}]}"},{"Country":"{\"Country\": \"Belize\", \"circuits\": null}"},{"Country":"{\"Country\": \"Benin\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bermuda\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bhutan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bolivia (Plurinational State of)\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bonaire, Sint Eustatius and Saba\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bosnia and Herzegovina\", \"circuits\": null}"},{"Country":"{\"Country\": \"Botswana\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bouvet Island\", \"circuits\": null}"},{"Country":"{\"Country\": \"Brazil\", \"circuits\": [{\"Circuits_ID\": 18, \"Circuit_name\": \"Autódromo José Carlos Pace\"}, {\"Circuits_ID\": 36, \"Circuit_name\": \"Autódromo Internacional Nelson Piquet\"}]}"},{"Country":"{\"Country\": \"British Indian Ocean Territory\", \"circuits\": null}"},{"Country":"{\"Country\": \"Brunei Darussalam\", \"circuits\": null}"},{"Country":"{\"Country\": \"Bulgaria\", \"circuits\": null}"},{"Country":"{\"Country\": \"Burkina Faso\", \"circuits\": null}"},{"Country":"{\"Country\": \"Burundi\", \"circuits\": null}"},{"Country":"{\"Country\": \"Cabo Verde\", \"circuits\": null}"},{"Country":"{\"Country\": \"Cambodia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Cameroon\", \"circuits\": null}"},{"Country":"{\"Country\": \"Canada\", \"circuits\": [{\"Circuits_ID\": 7, \"Circuit_name\": \"Circuit Gilles Villeneuve\"}, {\"Circuits_ID\": 48, \"Circuit_name\": \"Mosport International Raceway\"}, {\"Circuits_ID\": 52, \"Circuit_name\": \"Circuit Mont-Tremblant\"}]}"},{"Country":"{\"Country\": \"Canary Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Catalonia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Cayman Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Central African Republic\", \"circuits\": null}"},{"Country":"{\"Country\": \"Ceuta & Melilla\", \"circuits\": null}"},{"Country":"{\"Country\": \"Chad\", \"circuits\": null}"},{"Country":"{\"Country\": \"Chile\", \"circuits\": null}"},{"Country":"{\"Country\": \"China\", \"circuits\": [{\"Circuits_ID\": 17, \"Circuit_name\": \"Shanghai International Circuit\"}]}"},{"Country":"{\"Country\": \"Christmas Island\", \"circuits\": null}"},{"Country":"{\"Country\": \"Clipperton Island\", \"circuits\": null}"},{"Country":"{\"Country\": \"Cocos (Keeling) Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Colombia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Comoros\", \"circuits\": null}"},{"Country":"{\"Country\": \"Cook Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Costa Rica\", \"circuits\": null}"},{"Country":"{\"Country\": \"Côte d'Ivoire\", \"circuits\": null}"},{"Country":"{\"Country\": \"Croatia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Cuba\", \"circuits\": null}"},{"Country":"{\"Country\": \"Curaçao\", \"circuits\": null}"},{"Country":"{\"Country\": \"Cyprus\", \"circuits\": null}"},{"Country":"{\"Country\": \"Czech Republic\", \"circuits\": null}"},{"Country":"{\"Country\": \"Democratic Republic of the Congo\", \"circuits\": null}"},{"Country":"{\"Country\": \"Denmark\", \"circuits\": null}"},{"Country":"{\"Country\": \"Diego Garcia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Djibouti\", \"circuits\": null}"},{"Country":"{\"Country\": \"Dominica\", \"circuits\": null}"},{"Country":"{\"Country\": \"Dominican Republic\", \"circuits\": null}"},{"Country":"{\"Country\": \"Ecuador\", \"circuits\": null}"},{"Country":"{\"Country\": \"Egypt\", \"circuits\": null}"},{"Country":"{\"Country\": \"El Salvador\", \"circuits\": null}"},{"Country":"{\"Country\": \"England\", \"circuits\": null}"},{"Country":"{\"Country\": \"Equatorial Guinea\", \"circuits\": null}"},{"Country":"{\"Country\": \"Eritrea\", \"circuits\": null}"},{"Country":"{\"Country\": \"Estonia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Ethiopia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Europe\", \"circuits\": null}"},{"Country":"{\"Country\": \"Falkland Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Faroe Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Federated States of Micronesia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Fiji\", \"circuits\": null}"},{"Country":"{\"Country\": \"Finland\", \"circuits\": null}"},{"Country":"{\"Country\": \"France\", \"circuits\": [{\"Circuits_ID\": 8, \"Circuit_name\": \"Circuit de Nevers Magny-Cours\"}, {\"Circuits_ID\": 34, \"Circuit_name\": \"Circuit Paul Ricard\"}, {\"Circuits_ID\": 41, \"Circuit_name\": \"Dijon-Prenois\"}, {\"Circuits_ID\": 51, \"Circuit_name\": \"Charade Circuit\"}, {\"Circuits_ID\": 53, \"Circuit_name\": \"Rouen-Les-Essarts\"}, {\"Circuits_ID\": 54, \"Circuit_name\": \"Le Mans\"}, {\"Circuits_ID\": 55, \"Circuit_name\": \"Reims-Gueux\"}]}"},{"Country":"{\"Country\": \"French Guiana\", \"circuits\": null}"},{"Country":"{\"Country\": \"French Polynesia\", \"circuits\": null}"},{"Country":"{\"Country\": \"French Southern Territories\", \"circuits\": null}"},{"Country":"{\"Country\": \"Gabon\", \"circuits\": null}"},{"Country":"{\"Country\": \"Galicia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Gambia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Georgia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Germany\", \"circuits\": [{\"Circuits_ID\": 10, \"Circuit_name\": \"Hockenheimring\"}, {\"Circuits_ID\": 20, \"Circuit_name\": \"Nürburgring\"}, {\"Circuits_ID\": 61, \"Circuit_name\": \"AVUS\"}]}"},{"Country":"{\"Country\": \"Ghana\", \"circuits\": null}"},{"Country":"{\"Country\": \"Gibraltar\", \"circuits\": null}"},{"Country":"{\"Country\": \"Greece\", \"circuits\": null}"},{"Country":"{\"Country\": \"Greenland\", \"circuits\": null}"},{"Country":"{\"Country\": \"Grenada\", \"circuits\": null}"},{"Country":"{\"Country\": \"Guadeloupe\", \"circuits\": null}"},{"Country":"{\"Country\": \"Guam\", \"circuits\": null}"},{"Country":"{\"Country\": \"Guatemala\", \"circuits\": null}"},{"Country":"{\"Country\": \"Guernsey\", \"circuits\": null}"},{"Country":"{\"Country\": \"Guinea\", \"circuits\": null}"},{"Country":"{\"Country\": \"Guinea-Bissau\", \"circuits\": null}"},{"Country":"{\"Country\": \"Guyana\", \"circuits\": null}"},{"Country":"{\"Country\": \"Haiti\", \"circuits\": null}"},{"Country":"{\"Country\": \"Heard Island and McDonald Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Holy See\", \"circuits\": null}"},{"Country":"{\"Country\": \"Honduras\", \"circuits\": null}"},{"Country":"{\"Country\": \"Hong Kong\", \"circuits\": null}"},{"Country":"{\"Country\": \"Hungary\", \"circuits\": [{\"Circuits_ID\": 11, \"Circuit_name\": \"Hungaroring\"}]}"},{"Country":"{\"Country\": \"Iceland\", \"circuits\": null}"},{"Country":"{\"Country\": \"India\", \"circuits\": [{\"Circuits_ID\": 68, \"Circuit_name\": \"Buddh International Circuit\"}]}"},{"Country":"{\"Country\": \"Indonesia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Iran (Islamic Republic of)\", \"circuits\": null}"},{"Country":"{\"Country\": \"Iraq\", \"circuits\": null}"},{"Country":"{\"Country\": \"Ireland\", \"circuits\": null}"},{"Country":"{\"Country\": \"Isle of Man\", \"circuits\": null}"},{"Country":"{\"Country\": \"Israel\", \"circuits\": null}"},{"Country":"{\"Country\": \"Italy\", \"circuits\": [{\"Circuits_ID\": 14, \"Circuit_name\": \"Autodromo Nazionale di Monza\"}, {\"Circuits_ID\": 21, \"Circuit_name\": \"Autodromo Enzo e Dino Ferrari\"}, {\"Circuits_ID\": 65, \"Circuit_name\": \"Pescara Circuit\"}, {\"Circuits_ID\": 76, \"Circuit_name\": \"Autodromo Internazionale del Mugello\"}]}"},{"Country":"{\"Country\": \"Jamaica\", \"circuits\": null}"},{"Country":"{\"Country\": \"Japan\", \"circuits\": [{\"Circuits_ID\": 16, \"Circuit_name\": \"Fuji Speedway\"}, {\"Circuits_ID\": 22, \"Circuit_name\": \"Suzuka Circuit\"}, {\"Circuits_ID\": 28, \"Circuit_name\": \"Okayama International Circuit\"}]}"},{"Country":"{\"Country\": \"Jersey\", \"circuits\": null}"},{"Country":"{\"Country\": \"Jordan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Kazakhstan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Kenya\", \"circuits\": null}"},{"Country":"{\"Country\": \"Kiribati\", \"circuits\": null}"},{"Country":"{\"Country\": \"Kosovo\", \"circuits\": null}"},{"Country":"{\"Country\": \"Kuwait\", \"circuits\": null}"},{"Country":"{\"Country\": \"Kyrgyzstan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Laos\", \"circuits\": null}"},{"Country":"{\"Country\": \"Latvia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Lebanon\", \"circuits\": null}"},{"Country":"{\"Country\": \"Lesotho\", \"circuits\": null}"},{"Country":"{\"Country\": \"Liberia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Libya\", \"circuits\": null}"},{"Country":"{\"Country\": \"Liechtenstein\", \"circuits\": null}"},{"Country":"{\"Country\": \"Lithuania\", \"circuits\": null}"},{"Country":"{\"Country\": \"Luxembourg\", \"circuits\": null}"},{"Country":"{\"Country\": \"Macau\", \"circuits\": null}"},{"Country":"{\"Country\": \"Madagascar\", \"circuits\": null}"},{"Country":"{\"Country\": \"Malawi\", \"circuits\": null}"},{"Country":"{\"Country\": \"Malaysia\", \"circuits\": [{\"Circuits_ID\": 2, \"Circuit_name\": \"Sepang International Circuit\"}]}"},{"Country":"{\"Country\": \"Maldives\", \"circuits\": null}"},{"Country":"{\"Country\": \"Mali\", \"circuits\": null}"},{"Country":"{\"Country\": \"Malta\", \"circuits\": null}"},{"Country":"{\"Country\": \"Marshall Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Martinique\", \"circuits\": null}"},{"Country":"{\"Country\": \"Mauritania\", \"circuits\": null}"},{"Country":"{\"Country\": \"Mauritius\", \"circuits\": null}"},{"Country":"{\"Country\": \"Mayotte\", \"circuits\": null}"},{"Country":"{\"Country\": \"Mexico\", \"circuits\": [{\"Circuits_ID\": 32, \"Circuit_name\": \"Autódromo Hermanos Rodríguez\"}]}"},{"Country":"{\"Country\": \"Moldova\", \"circuits\": null}"},{"Country":"{\"Country\": \"Monaco\", \"circuits\": [{\"Circuits_ID\": 6, \"Circuit_name\": \"Circuit de Monaco\"}]}"},{"Country":"{\"Country\": \"Mongolia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Montenegro\", \"circuits\": null}"},{"Country":"{\"Country\": \"Montserrat\", \"circuits\": null}"},{"Country":"{\"Country\": \"Morocco\", \"circuits\": [{\"Circuits_ID\": 64, \"Circuit_name\": \"Ain Diab\"}]}"},{"Country":"{\"Country\": \"Mozambique\", \"circuits\": null}"},{"Country":"{\"Country\": \"Myanmar\", \"circuits\": null}"},{"Country":"{\"Country\": \"Namibia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Nauru\", \"circuits\": null}"},{"Country":"{\"Country\": \"Nepal\", \"circuits\": null}"},{"Country":"{\"Country\": \"Netherlands\", \"circuits\": [{\"Circuits_ID\": 39, \"Circuit_name\": \"Circuit Park Zandvoort\"}]}"},{"Country":"{\"Country\": \"New Caledonia\", \"circuits\": null}"},{"Country":"{\"Country\": \"New Zealand\", \"circuits\": null}"},{"Country":"{\"Country\": \"Nicaragua\", \"circuits\": null}"},{"Country":"{\"Country\": \"Niger\", \"circuits\": null}"},{"Country":"{\"Country\": \"Nigeria\", \"circuits\": null}"},{"Country":"{\"Country\": \"Niue\", \"circuits\": null}"},{"Country":"{\"Country\": \"Norfolk Island\", \"circuits\": null}"},{"Country":"{\"Country\": \"North Korea\", \"circuits\": null}"},{"Country":"{\"Country\": \"North Macedonia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Northern Ireland\", \"circuits\": null}"},{"Country":"{\"Country\": \"Northern Mariana Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Norway\", \"circuits\": null}"},{"Country":"{\"Country\": \"Oman\", \"circuits\": null}"},{"Country":"{\"Country\": \"Pakistan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Palau\", \"circuits\": null}"},{"Country":"{\"Country\": \"Panama\", \"circuits\": null}"},{"Country":"{\"Country\": \"Papua New Guinea\", \"circuits\": null}"},{"Country":"{\"Country\": \"Paraguay\", \"circuits\": null}"},{"Country":"{\"Country\": \"Peru\", \"circuits\": null}"},{"Country":"{\"Country\": \"Philippines\", \"circuits\": null}"},{"Country":"{\"Country\": \"Pitcairn\", \"circuits\": null}"},{"Country":"{\"Country\": \"Poland\", \"circuits\": null}"},{"Country":"{\"Country\": \"Portugal\", \"circuits\": [{\"Circuits_ID\": 27, \"Circuit_name\": \"Autódromo do Estoril\"}, {\"Circuits_ID\": 59, \"Circuit_name\": \"Circuito da Boavista\"}, {\"Circuits_ID\": 62, \"Circuit_name\": \"Monsanto Park Circuit\"}, {\"Circuits_ID\": 75, \"Circuit_name\": \"Autódromo Internacional do Algarve\"}]}"},{"Country":"{\"Country\": \"Puerto Rico\", \"circuits\": null}"},{"Country":"{\"Country\": \"Qatar\", \"circuits\": [{\"Circuits_ID\": 78, \"Circuit_name\": \"Losail International Circuit\"}]}"},{"Country":"{\"Country\": \"Republic of the Congo\", \"circuits\": null}"},{"Country":"{\"Country\": \"Réunion\", \"circuits\": null}"},{"Country":"{\"Country\": \"Romania\", \"circuits\": null}"},{"Country":"{\"Country\": \"Russia\", \"circuits\": [{\"Circuits_ID\": 71, \"Circuit_name\": \"Sochi Autodrom\"}]}"},{"Country":"{\"Country\": \"Rwanda\", \"circuits\": null}"},{"Country":"{\"Country\": \"Saint Barthélemy\", \"circuits\": null}"},{"Country":"{\"Country\": \"Saint Helena, Ascension and Tristan da Cunha\", \"circuits\": null}"},{"Country":"{\"Country\": \"Saint Kitts and Nevis\", \"circuits\": null}"},{"Country":"{\"Country\": \"Saint Lucia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Saint Martin\", \"circuits\": null}"},{"Country":"{\"Country\": \"Saint Pierre and Miquelon\", \"circuits\": null}"},{"Country":"{\"Country\": \"Saint Vincent and the Grenadines\", \"circuits\": null}"},{"Country":"{\"Country\": \"Samoa\", \"circuits\": null}"},{"Country":"{\"Country\": \"San Marino\", \"circuits\": null}"},{"Country":"{\"Country\": \"Sao Tome and Principe\", \"circuits\": null}"},{"Country":"{\"Country\": \"Saudi Arabia\", \"circuits\": [{\"Circuits_ID\": 77, \"Circuit_name\": \"Jeddah Street Circuit\"}]}"},{"Country":"{\"Country\": \"Scotland\", \"circuits\": null}"},{"Country":"{\"Country\": \"Senegal\", \"circuits\": null}"},{"Country":"{\"Country\": \"Serbia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Seychelles\", \"circuits\": null}"},{"Country":"{\"Country\": \"Sierra Leone\", \"circuits\": null}"},{"Country":"{\"Country\": \"Singapore\", \"circuits\": [{\"Circuits_ID\": 15, \"Circuit_name\": \"Marina Bay Street Circuit\"}]}"},{"Country":"{\"Country\": \"Sint Maarten\", \"circuits\": null}"},{"Country":"{\"Country\": \"Slovakia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Slovenia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Solomon Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Somalia\", \"circuits\": null}"},{"Country":"{\"Country\": \"South Africa\", \"circuits\": [{\"Circuits_ID\": 30, \"Circuit_name\": \"Kyalami\"}, {\"Circuits_ID\": 56, \"Circuit_name\": \"Prince George Circuit\"}]}"},{"Country":"{\"Country\": \"South Georgia and the South Sandwich Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"South Korea\", \"circuits\": null}"},{"Country":"{\"Country\": \"South Sudan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Spain\", \"circuits\": [{\"Circuits_ID\": 4, \"Circuit_name\": \"Circuit de Barcelona-Catalunya\"}, {\"Circuits_ID\": 12, \"Circuit_name\": \"Valencia Street Circuit\"}, {\"Circuits_ID\": 26, \"Circuit_name\": \"Circuito de Jerez\"}, {\"Circuits_ID\": 45, \"Circuit_name\": \"Jarama\"}, {\"Circuits_ID\": 49, \"Circuit_name\": \"Montjuïc\"}, {\"Circuits_ID\": 67, \"Circuit_name\": \"Circuit de Pedralbes\"}]}"},{"Country":"{\"Country\": \"Sri Lanka\", \"circuits\": null}"},{"Country":"{\"Country\": \"State of Palestine\", \"circuits\": null}"},{"Country":"{\"Country\": \"Sudan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Suriname\", \"circuits\": null}"},{"Country":"{\"Country\": \"Svalbard and Jan Mayen\", \"circuits\": null}"},{"Country":"{\"Country\": \"Swaziland\", \"circuits\": null}"},{"Country":"{\"Country\": \"Sweden\", \"circuits\": [{\"Circuits_ID\": 47, \"Circuit_name\": \"Scandinavian Raceway\"}]}"},{"Country":"{\"Country\": \"Switzerland\", \"circuits\": [{\"Circuits_ID\": 66, \"Circuit_name\": \"Circuit Bremgarten\"}]}"},{"Country":"{\"Country\": \"Syrian Arab Republic\", \"circuits\": null}"},{"Country":"{\"Country\": \"Taiwan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Tajikistan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Tanzania\", \"circuits\": null}"},{"Country":"{\"Country\": \"Thailand\", \"circuits\": null}"},{"Country":"{\"Country\": \"Timor-Leste\", \"circuits\": null}"},{"Country":"{\"Country\": \"Togo\", \"circuits\": null}"},{"Country":"{\"Country\": \"Tokelau\", \"circuits\": null}"},{"Country":"{\"Country\": \"Tonga\", \"circuits\": null}"},{"Country":"{\"Country\": \"Trinidad and Tobago\", \"circuits\": null}"},{"Country":"{\"Country\": \"Tristan da Cunha\", \"circuits\": null}"},{"Country":"{\"Country\": \"Tunisia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Turkey\", \"circuits\": [{\"Circuits_ID\": 5, \"Circuit_name\": \"Istanbul Park\"}]}"},{"Country":"{\"Country\": \"Turkmenistan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Turks and Caicos Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"Tuvalu\", \"circuits\": null}"},{"Country":"{\"Country\": \"Uganda\", \"circuits\": null}"},{"Country":"{\"Country\": \"Ukraine\", \"circuits\": null}"},{"Country":"{\"Country\": \"United Arab Emirates\", \"circuits\": [{\"Circuits_ID\": 24, \"Circuit_name\": \"Yas Marina Circuit\"}]}"},{"Country":"{\"Country\": \"United Kingdom\", \"circuits\": [{\"Circuits_ID\": 9, \"Circuit_name\": \"Silverstone Circuit\"}, {\"Circuits_ID\": 31, \"Circuit_name\": \"Donington Park\"}, {\"Circuits_ID\": 38, \"Circuit_name\": \"Brands Hatch\"}, {\"Circuits_ID\": 58, \"Circuit_name\": \"Aintree\"}]}"},{"Country":"{\"Country\": \"United Nations\", \"circuits\": null}"},{"Country":"{\"Country\": \"United States Minor Outlying Islands\", \"circuits\": null}"},{"Country":"{\"Country\": \"United States of America\", \"circuits\": [{\"Circuits_ID\": 19, \"Circuit_name\": \"Indianapolis Motor Speedway\"}, {\"Circuits_ID\": 33, \"Circuit_name\": \"Phoenix street circuit\"}, {\"Circuits_ID\": 37, \"Circuit_name\": \"Detroit Street Circuit\"}, {\"Circuits_ID\": 42, \"Circuit_name\": \"Fair Park\"}, {\"Circuits_ID\": 43, \"Circuit_name\": \"Long Beach\"}, {\"Circuits_ID\": 44, \"Circuit_name\": \"Las Vegas Street Circuit\"}, {\"Circuits_ID\": 46, \"Circuit_name\": \"Watkins Glen\"}, {\"Circuits_ID\": 60, \"Circuit_name\": \"Riverside International Raceway\"}, {\"Circuits_ID\": 63, \"Circuit_name\": \"Sebring International Raceway\"}, {\"Circuits_ID\": 69, \"Circuit_name\": \"Circuit of the Americas\"}, {\"Circuits_ID\": 72, \"Circuit_name\": \"Port Imperial Street Circuit\"}]}"},{"Country":"{\"Country\": \"Uruguay\", \"circuits\": null}"},{"Country":"{\"Country\": \"Uzbekistan\", \"circuits\": null}"},{"Country":"{\"Country\": \"Vanuatu\", \"circuits\": null}"},{"Country":"{\"Country\": \"Venezuela\", \"circuits\": null}"},{"Country":"{\"Country\": \"Vietnam\", \"circuits\": [{\"Circuits_ID\": 74, \"Circuit_name\": \"Hanoi Street Circuit\"}]}"},{"Country":"{\"Country\": \"Virgin Islands (British)\", \"circuits\": null}"},{"Country":"{\"Country\": \"Virgin Islands (U.S.)\", \"circuits\": null}"},{"Country":"{\"Country\": \"Wales\", \"circuits\": null}"},{"Country":"{\"Country\": \"Wallis and Futuna\", \"circuits\": null}"},{"Country":"{\"Country\": \"Western Sahara\", \"circuits\": null}"},{"Country":"{\"Country\": \"Yemen\", \"circuits\": null}"},{"Country":"{\"Country\": \"Zambia\", \"circuits\": null}"},{"Country":"{\"Country\": \"Zimbabwe\", \"circuits\": null}"}]}`</script>

将嵌套的 JSON 数据加载到 HTML <UL> <LI> 列表....>

Load nested JSON Data into HTML <UL> <LI> list....>

javascript

json

nested-lists

html-lists