首先，環境：
- 節點js
- 表達
- 我的SQL
- 普通的舊 Javascript（未使用框架）
我正在從 MySQL 資料庫讀取按國家/地區劃分的 F1 電路串列，以 JSON 格式獲取輸出，并且我想在客戶端使用 javascript 將資料加載到 HTML 頁面中，這是所需的格式：
- 國家：
- 賽道名稱
- 賽道 2 名稱
- 國家 2：
- 賽道名稱
- 國家 3：[如果不存在曲目，則不顯示任何內容]
有些國家根本沒有賽道，有些國家有 1 條賽道，而其他國家有一些賽道，如我的 SQL 查詢的 JSON 輸出所示：
如圖所示，Index 0 的 Country 沒有軌道，Index 10 的 Country 有 1 個軌道，Index 14 的 Country 有超過 1 個軌道。
我堅持將 JSON 資料讀入回圈并將其加載到頁面中適當的 <LI> 元素中以顯示如上所示（包括嵌套）。
我遇到的問題是我無法理解如何讀取這種 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;`;{"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。
uj5u.com熱心網友回復：
這是我使用模板文字的版本
您可以通過回傳正確的 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>uj5u.com熱心網友回復：
JSON.parse在這里將資料解釋為物件會很方便。完成后，您可以遍歷添加到 main 的國家/地區串列<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/399372.html
標籤：javascript json html 列表 嵌套列表