#Accounting for Null

1 messages · Page 1 of 1 (latest)

quick craterBOT
#

Hi @turbid knot. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To account for null values in the skills array, you can add a conditional check before mapping over the array. This will prevent any errors that might occur when trying to call .map() on null or undefined.

Here's how you can modify your code:

const { data: skills } = await supabase.from("infotable").select();

// unrelated code here

return (
  //blah blah blah
  <td className="border border-white p-2">
    <div className="flex justify-center">
      {skills && skills.map((skill) => {
        let tripodImages = [];
        let priorityArray = [false, false, false];

        try {
          tripodImages = JSON.parse(skill.tripod_images);
          if (skill.tripod_priority) {
            priorityArray = JSON.parse(skill.tripod_priority);
          }
        } catch (error) {
          console.error('Error parsing JSON', error);
        }

        return tripodImages.map((image: string, index: number) => {
          return (
            <div key={index} className="flex flex-col items-center">
              <img
                src={`${storageBaseUrl}/${image}`}
                alt="Tripods"
                className="h-12 w-12 mr-1"
              />
              {priorityArray[index] ? (
                <img
                  src={`${storageBaseUrl}/Tripods/Tripod_Icon.png`}
                  alt={`Priority ${index + 1}`}
                  className="h-6 w-6 mt-1"
                />
              ) : null}
            </div>
          );
        });
      })}
    </div>
  </td>
);

In this code, skills && skills.map((skill) => {...}) will only attempt to map over skills if skills is not null or undefined.

#

Please note that this code assumes that skills is an array. If skills is an object, you might need to adjust the code accordingly.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@turbid knot kapa.ai is still learning and improving, please let us know how it did by reacting below

turbid knot
#

@quick crater Skills can be both an object or an array, because it's a bunched up SQL query to the infotable database as skills

quick craterBOT
#

Let me check the knowledge base for you. One moment! :books:

#

If skills can be either an object or an array, you'll need to add additional checks to handle both cases. Here's how you can modify your code:

const {{ data: skills }} = await supabase.from("infotable").select();

// unrelated code here

return (
  //blah blah blah
  <td className="border border-white p-2">
    <div className="flex justify-center">
      {{
        Array.isArray(skills) ? skills.map(renderSkill) : renderSkill(skills)
      }}
    </div>
  </td>
);

function renderSkill(skill) {
  let tripodImages = [];
  let priorityArray = [false, false, false];

  try {{
    tripodImages = JSON.parse(skill.tripod_images);
    if (skill.tripod_priority) {{
      priorityArray = JSON.parse(skill.tripod_priority);
    }}
  }} catch (error) {{
    console.error('Error parsing JSON', error);
  }}

  return tripodImages.map((image: string, index: number) => {{
    return (
      <div key={{index}} className="flex flex-col items-center">
        <img
          src={{`${{storageBaseUrl}}/${{image}}`}}
          alt="Tripods"
          className="h-12 w-12 mr-1"
        />
        {{priorityArray[index] ? (
          <img
            src={{`${{storageBaseUrl}}/Tripods/Tripod_Icon.png`}}
            alt={{`Priority ${{index + 1}}`}}
            className="h-6 w-6 mt-1"
          />
        ) : null}}
      </div>
    );
  }});
}

In this code, Array.isArray(skills) ? skills.map(renderSkill) : renderSkill(skills) will check if skills is an array. If it is, it will map over skills and call renderSkill for each skill. If skills is not an array (i.e., it's an object), it will call renderSkill directly on skills.

#

The renderSkill function contains the logic for rendering a single skill, which was previously inside your .map() call. This allows us to reuse the same logic for both arrays and objects.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: