[英]How to extract Json data from js int html with conditional logic
我需要编写一个条件来检查每个图像值,如果它为空,则显示一张库存照片“selfie.jpg”,如果不是,则显示其中的任何内容。
我知道如何访问它 beat.officers[0].image。 我不知道的是如何让程序检查每个项目图像值的官员的长度,检查它是否为空,然后根据检查结果显示照片。
请帮助它进行测试。
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'
}
}
您可以使用下面的函数来获得正确的输出。 一个函数将仅返回一名军官的 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.