How to extract Json data from js int html with conditional logic

Question

I need to write a conditional that checked each image value and if its empty displays a stock photo 'selfie.jpg' and if it is not then display whatever is inside of it.

I know how to access it beat.officers[0].image. what I don't know is how to make the program check through the length of officers for each items image value, check if its empty and then display a photo based on the results of that check.

pls help its for a test.

A image of the Json object I am trying to work with

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/'
      }
    ]
  }
}];

So here is my template which is functional. As you can see though its not dynamic and I tried to input the conditional as a function with an if statement but its just not working. I did consider trying the turnery (condition : if yes : if no) but I struggled with that too.

Some of the image values are empty you see? Ultimately, I am trying to make it go through each object and check its image value and then run the conditional.

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

You can use the functions from below to get the correct output. One function will return the HTML for just one officer while the other will return the HTML of all of them. You can test it below.

 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);