Check ios data defined before render component

web/src/components/things/IosAppDetailedInfo.astro

@@ -10,7 +10,7 @@ interface Props {
   url: string;
 };
 
-const { iosData, url } = Astro.props;
+const { iosData } = Astro.props;
 
 const bytesToMb = (bytes: number) => (bytes / 1024 / 1024).toFixed(2);
 
@@ -75,7 +75,7 @@ const putCommaInNumber = (num: number | any) => {
       </li>
       <li>
         <span class="lbl">Device Models Supported</span>
-        <span class="val">{iosData.supportedDevices.length}</span>
+        <span class="val">{iosData.supportedDevices ? iosData.supportedDevices.length : 'Unknown'}</span>
       </li>
     </ul>
   </div>
@@ -95,10 +95,12 @@ const putCommaInNumber = (num: number | any) => {
         <span class="lbl">Age Advisory</span>
         <span class="val">{iosData.contentAdvisoryRating}</span>
       </li>
+      {iosData.languageCodesISO2A && (
       <li>
         <span class="lbl">Supported Languages</span>
         <span class="val" title={iosData.languageCodesISO2A.join(', ')}>{iosData.languageCodesISO2A.length}</span>
       </li>
+      )}
       <li>
         <span class="lbl">Developer</span>
         <span class="val"><a href={iosData.artistViewUrl}>{iosData.sellerName}</a></span>
@@ -109,14 +111,16 @@ const putCommaInNumber = (num: number | any) => {
       </li>
     </ul>
 
-    <h4>Screenshots</h4>
-    <ul class="screenshots">
-      {iosData.screenshotUrls.map((url) => (
-        <li>
-          <img src={url} width="100" />
-        </li>
-      ))}
-    </ul>
+    {iosData.screenshotUrls && (
+      <h4>Screenshots</h4>
+      <ul class="screenshots">
+        {iosData.screenshotUrls.map((url) => (
+          <li>
+            <img src={url} width="100" />
+          </li>
+        ))}
+      </ul>
+    )}
     
   </div>
 </div>

web/src/pages/[...listing].astro

@@ -338,7 +338,7 @@ const getApiEndpoint = () => {
         <AndroidAppDetailedInfo androidData={androidData} />
       </section>
     )}
-    { iosData && (
+    { iosData && typeof iosData === 'object' && Object.keys(iosData).length > 0 && (
       <section>
         <h3>{name} iOS App</h3>
         <IosAppDetailedInfo url={url} iosData={iosData} />