Run results for: 1 iter vs 3 iter 3

Run details:

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36 OPR/80.0.4170.63

Browser: Opera 80

Operating system: Windows 7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
1	92725.4 Ops/sec
3	410243.9 Ops/sec

Script Preparation code:

yourFlatObject = {
      "height": "172",
      "mass": "77",
      "hair_color": "blond",
      "skin_color": "fair",
      "eye_color": "blue",
      "birth_year": "19BBY",
      "gender": "male",
      "created": "2021-11-07T15:18:53.215Z",
      "edited": "2021-11-07T15:18:53.215Z",
      "name": "Luke Skywalker",
      "homeworld": "https://www.swapi.tech/api/planets/1",
      "url": "https://www.swapi.tech/api/people/1",
      "2height2": "172",
      "2mass": "77",
      "2hair_color": "blond",
      "2skin_color": "fair",
      "2eye_color": "blue",
      "2birth_year": "19BBY",
      "2gender": "male",
      "2created": "2021-11-07T15:18:53.215Z",
      "2edited": "2021-11-07T15:18:53.215Z",
      "2name": "Luke Skywalker",
      "2homeworld": "https://www.swapi.tech/api/planets/1",
      "2url": "https://www.swapi.tech/api/people/1"	
}

Tests:

1
let html = ''; for ( let item in yourFlatObject ) if (yourFlatObject[item] ) //!= null html+=`<p>${yourFlatObject[item]}</p>`; html = html?`<div class="info">${html}</div>`:'';
3
let html = ''; const filteredData = Object.entries(yourFlatObject) .map(([key, value]) => ({ key, value })) .filter(({ value }) => value != null); if ( filteredData.length ) { filteredData.forEach( (item)=>{ html+=`<p>${item.value}</p>`; }); html = `<div class="info">${html}</div>`; }