JSON到HTML页面的名称和图像作为输出

Question

有人可以帮我从以下 json 中获取 Name 及其相关图像。

代码应该是 HTML 或 JS，因为我是后端开发人员，无法弄清楚这一点。

JSON：

{
"boardMembers": [
{
"id": "18706279",
"name": "Monique R Herena",
"thumbnail": null,
"title": "Chief Colleague Experience Officer",
"slug": "18706279-monique-r-herena",
"webVisibility": true
},
{
"id": "19676689",
"name": "Elizabeth Rutledge",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iABmk_sWUnY4/v3/80x80.png",
"alt": null
},
"title": "Chief Marketing Officer",
"slug": "19676689-elizabeth-rutledge",
"webVisibility": true
},
{
"id": "18784925",
"name": "Tangela Richter",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iKYkW0FlMRW4/v3/80x80.png",
"alt": null
},
"title": "Chief Governance Ofcr/Secy",
"slug": "18784925-tangela-richter",
"webVisibility": true
},
{
"id": "15024090",
"name": "Laureen E Seeger",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iiw0z.pdTRbE/v1/80x80.jpg",
"alt": "LAUREEN E SEEGER"
},
"title": "Chief Legal Officer",
"slug": "15024090-laureen-e-seeger",
"webVisibility": true
},
{
"id": "21336581",
"name": "Jennifer Skyler",
"thumbnail": null,
"title": "Chief Corporate Affairs Officer",
"slug": "21336581-jennifer-skyler",
"webVisibility": true
},
{
"id": "19676686",
"name": "Raymond Joabar",
"thumbnail": null,
"title": "Pres:Global Risk/CRO",
"slug": "19676686-raymond-joabar",
"webVisibility": true
},
{
"id": "15365626",
"name": "Douglas E Buckminster",
"thumbnail": null,
"title": "Group Pres:Global Consumer",
"slug": "15365626-douglas-e-buckminster",
"webVisibility": true
},
{
"id": "16654781",
"name": "Anna Marrs",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNFzMiuYiRGY/v3/80x80.png",
"alt": null
},
"title": "Pres:Global Commercial Svcs",
"slug": "16654781-anna-marrs",
"webVisibility": true
},
{
"id": "16804630",
"name": "Denise Pickett",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iReOY_ZB0dOI/v2/80x80.png",
"alt": null
},
"title": "Pres:Global Services Group",
"slug": "16804630-denise-pickett",
"webVisibility": true
},
{
"id": "6832356",
"name": "Anre D Williams",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iJ5kSc7LL.3Y/v2/80x80.png",
"alt": null
},
"title": "Pres:Global Merchant & Network Svcs",
"slug": "6832356-anre-d-williams",
"webVisibility": true
},
{
"id": "3221610",
"name": "Jeffrey C Campbell \"Jeff\"",
"thumbnail": {
"url": " ",
"alt": "35000014"
},
"title": "Exec VP/CFO",
"slug": "3221610-jeffrey-c-campbell",
"webVisibility": true
},
{
"id": "16733751",
"name": "Marc D Gordon",
"thumbnail": {
"url": " ",
"alt": null
},
"title": "Exec VP/CIO",
"slug": "16733751-marc-d-gordon",
"webVisibility": true
},
{
"id": "21531045",
"name": "Jessica Lieberman Quinn",
"thumbnail": null,
"title": "Exec VP/Controller",
"slug": "21531045-jessica-lieberman-quinn",
"webVisibility": true
},
{
"id": "19863566",
"name": "Alan P Gallo",
"thumbnail": {
"url": " ",
"alt": null
},
"title": "Exec VP:Internal Audit/Chief Audit Exec",
"slug": "19863566-alan-p-gallo",
"webVisibility": true
},
{
"id": "16310906",
"name": "Vivian Zhou",
"thumbnail": null,
"title": "Senior VP/Head:Investor Relations",
"slug": "16310906-vivian-zhou",
"webVisibility": false
}
],
"totalExecutives": 17
}

Answer 1

欢迎来到前端世界！首先，HTML 不是一种编程语言，它是一种标记语言。您需要使用 JavaScript，而不是 HTML。

您需要将字符串解析为一个对象，并迭代对象列表中的每个“成员”以获取此名称和照片。我写了一个 JavaScript 版本和一个 PHP 版本进行比较。

如果您使用的是 JavaScript：

1. 将字符串解析为 JavaScript 对象（“JSON.parse”函数）
2. 迭代“boardMembers”列表中的项目
3. 获取这些值

代码：

//Your string 
let stringToParse = '<your string here>'

//Converting your string to object
let convertedToObject = JSON.parse(stringToParse);

//Getting the boardMembers list from your parsed object
let listBoardMembers = convertedToObject.boardMembers;

//Creating Elements on HTML (creating a Paragraph with the received data and a container for the list of members). *Notice: I've created a "DIV" (container) with a unique ID ("listMembers"). This is important because when I start to iterate the members I will add them inside the container, and for that, I need to reference it using an ID.*

document.body.innerHTML = `<p> Received String: ${stringToParse}</p>`;
document.body.innerHTML += `<div id="listMembers"></div>`;


//Iterating the list of boardMembers using this length;
for (let i = 0; i < listBoardMembers.length; i++) {
  let member = listOfMembers[i];

  let memberName = member.name;
  let memberImageURL = '';

  // Verify if the user has thumbnail
  if (member.thumbnail !== null){
     memberImageURL = member.thumbnail.url;
  }


  //Adding this member to the member's container, using the container ID, that we created previously.

  document.getElementById('listMembers').innerHTML += `
     <div style="display: flex;">
       <img src="${memberImageURL}">
       <h1>${memberName}</h1>
     </div>
  `;
}

最好的问候，