如何使用條件邏輯從js int html中提取Json數據

Question

我需要編寫一個條件來檢查每個圖像值，如果它為空，則顯示一張庫存照片“selfie.jpg”，如果不是，則顯示其中的任何內容。

我知道如何訪問它 beat.officers[0].image。 我不知道的是如何讓程序檢查每個項目圖像值的官員的長度，檢查它是否為空，然后根據檢查結果顯示照片。

請幫助它進行測試。

我正在嘗試使用的 Json 對象的圖像

const policeData = [
{
  beat: 
  {
    name: 'Portishead',
    latLong: ' ',
    introText: 'Contact your local policing team, find opportunities to meet the team and view or contribute to community policing priorities for your area.',
    officers: [
      {
        name: 'Trevor Dyson',
        role: 'Neighbourhood Police Team Sergeant',
        image: ''
      },
      {
        name: 'Kirsten Karcher',
        role: 'Police Community Support Officer',
        image: 'kkarcher.jpg'
      },
      {
        name: 'Bill Hoover',
        role: 'Police Community Support Officer',
        image: ''
      },
      {
        name: 'Andrew Henry',
        role: 'Partnership Support Officer',
        image: ''
      }
    ],
    priorities: [
      {
        title: 'Road Safety Week',
        updated: '18 November 2019',
        path: '/road-safety-week/'
      },
      {
        title: 'Community SpeedWatch',
        updated: '14 August 2019',
        path: '/community-speedwatch/'
      },
      {
        title: 'Mopeds using footpaths and speeding vehicles',
        updated: '04 September 2019',
        path: '/mopeds-using-footpaths-and-speeding-vehicles/'
      }
    ]
  }
}];

所以這是我的模板，它是功能性的。 正如您所看到的，雖然它不是動態的，但我嘗試將條件作為帶有 if 語句的函數輸入，但它只是不起作用。 我確實考慮過嘗試車削（條件：如果是：如果不是），但我也為此而掙扎。

有些圖像值是空的，你看到了嗎？ 最終，我試圖讓它通過每個對象並檢查其圖像值，然后運行條件。

function kk(police) {
    officers = police.beat.officers.length;

    return `
    <div class=person>
        <img class="pol-photo" src = "${photoO(police.beat.officers[0])}"
        <h2 class ="pol-name">${police.beat.officers[1].name}</h2>
        <p> ${police.beat.officers[1].role}</p>
    </div>
    `
}


function photoO(pol) {
    if (pol == '' ) {
        return 'officer-profile.jpg'
    }   else {
        return 'kkarcher.jpg'
    }   
    }

Answer 1

您可以使用下面的函數來獲得正確的輸出。 一個函數將僅返回一名軍官的 HTML，而另一個函數將返回所有軍官的 HTML。 您可以在下面進行測試。

 const policeData = [ { beat: { name: 'Portishead', latLong: ' ', introText: 'Contact your local policing team, find opportunities to meet the team and view or contribute to community policing priorities for your area.', officers: [ { name: 'Trevor Dyson', role: 'Neighbourhood Police Team Sergeant', image: '' }, { name: 'Kirsten Karcher', role: 'Police Community Support Officer', image: 'kkarcher.jpg' }, { name: 'Bill Hoover', role: 'Police Community Support Officer', image: '' }, { name: 'Andrew Henry', role: 'Partnership Support Officer', image: '' } ], priorities: [ { title: 'Road Safety Week', updated: '18 November 2019', path: '/road-safety-week/' }, { title: 'Community SpeedWatch', updated: '14 August 2019', path: '/community-speedwatch/' }, { title: 'Mopeds using footpaths and speeding vehicles', updated: '04 September 2019', path: '/mopeds-using-footpaths-and-speeding-vehicles/' } ] } }]; // helper function to check if value is empty function existsAndNotEmpty(value) { if (typeof value != 'undefined' && value.length > 0) { return true; } return false; } function getOfficerHTML(officer) { let result = ""; if( existsAndNotEmpty(officer.image) ) { result += '<img class="pol-photo" src = "' + officer.image + '" />'; } else { result += '<img class="pol-photo" src = "officer-profile.jpg" />'; } if( existsAndNotEmpty(officer.name) ) { result += '<h2 class ="pol-name">' + officer.name + '</h2>'; } else { result += '<h2 class ="pol-name">Unknown officer</h2>'; } if( existsAndNotEmpty(officer.role) ) { result += '<p>' + officer.role + '</p>'; } else { result += '<p>Unknown role</p>'; } return result; } function getAllOfficerHTML() { let result = ""; let officerLength = policeData[0].beat.officers.length; let officers = policeData[0].beat.officers; for(var i=0; i < officerLength; i++){ result += getOfficerHTML(officers[i]); } return result; } // Now you can use it like this to print a single officer var singleOfficer = getOfficerHTML(policeData[0].beat.officers[1]); console.log(singleOfficer); // or like this to get all ooficers at once var allOfficers = getAllOfficerHTML(); console.log(allOfficers);