Tips for preventing the "TypeError: Cannot read property 'weekday_text' of undefined" issue when dealing with objects that may or may not have this field

When I request sight information from the Google Places API, some sights include an opening_hours object field with weekday_text and open_now fields. However, some sights do not have this structure, resulting in an error.

<p v-if='sight.opening_hours && sight.opening_hours.open_now'>Open now</p>
<p v-if='sight.opening_hours && !sight.opening_hours.open_now'>Closed now</p>
<p v-if='sight.opening_hours && sight.opening_hours.weekday_text' v-for='day in this.sight.opening_hours.weekday_text'>{{ day }}</p>

Am I missing cases where sight.opening_hours or sight.opening_hours.weekday_text do not exist? The issue seems to be related to the v-for loop, as everything works fine when it is removed.

javascriptvue.jsvuejs2

Answer №1

Visit this link for information on using v-if with v-for in Vue.js

<div v-if='sight.opening_hours && sight.opening_hours.weekday_text'>
  <p v-for='day in this.sight.opening_hours.weekday_text'>{{ day }}</p>
</div>

If you prefer not to use a div, you can also utilize the template tag

<template v-if="sight.opening_hours && sight.opening_hours.weekday_text">
  <p v-for='day in this.sight.opening_hours.weekday_text'>{{ day }}</p>
</template>

Answer №2

To improve your code, consider restructuring it with a focus on 'condition checking at the outer level and iteration within'. Utilizing the template element may be beneficial.

template(v-if="sight.opening_hours && sight.opening_hours.weekday_text")
  p(
    v-for="(day, index) in this.sight.opening_hours.weekday_text",
    :key="index"
  )
    | {{ day }}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After integrating Vue + Inertia into my Laravel 10 project, I encountered an issue where I am receiving an error stating 'autocomplete not a function' when trying to load a Vue

BACKGROUND: My Laravel application is well-established and developed using Laravel, Blade, Javascript, and JQuery. Loading a blade view from the Laravel section of the site does not show any errors in Chrome dev tools. It's important to note that I ut ...

jqueryvue.jsinertiajslaravel-10

Is there a Webpack plugin for both compressing jpg and png images and converting them to webp format

I'm currently exploring different methods to effectively compress my images using webpack. Specifically, I am interested in compressing .jpg files (lossy), .png files, and also generating .webp files for each jpg/png file. Although I have experimente ...

javascriptnpmwebpackimage-compressionwebp

Arrange the date correctly based on the information retrieved from a JSON file

After retrieving a JSON file using an API, it looks something like this: timeline: { cases: { '5/13/21': 5902343, '...' : ... }, } This data is then used to create a chart using ChartJs. The problem is that the dates in the ...

javascriptnext.js

"Change opacity smoothly with the FadeToggle feature for a

I have a question that might seem silly, but I can't quite figure it out. How can I extend the duration of the fade effect? window.switchIn = function() { $('.red').fadeToggle(function(){ $('.blue').fadeToggle(function() { ...

javascriptjqueryfade

Unable to install Vue CLI due to npm issues

When attempting to update Vue CLI to the latest version using npm update, I now encounter an error every time I try to run Vue: vue create node:internal/modules/cjs/loader:936 throw err; ^ Error: Cannot find module 'strip-ansi' Require stack ...

vue.jsnpmvue-cli

When utilizing the data property within the useQuery() hook, an error may arise stating "Unable to

This problem has me scratching my head. The code snippet below is triggering this error: TypeError: Cannot read properties of undefined (reading 'map') When I use console.log() to check res.data, everything seems normal and there is data present ...

javascriptnode.jsreactjsreact-query

Using iteration and conditional statements to verify the data type of an array

I'm attempting to check the array for the same data types using a for loop and if conditionals. However, my code doesn't seem to be working as expected. Can someone please help me figure out why? Thank you in advance! function checkDataTypes( ...

javascriptarraystypes

npm: generate new script directive

When I start up my NodeJs (ES6) project, I usually enter the following command in the console: ./node_modules/babel/bin/babel-node.js index.js However, I wanted to streamline this process by adding the command to the scripts section of my package.json fi ...

javascriptnode.jsnpm

Deactivate and reinitialize customized box using jQuery

Hey there! I have a question regarding Jquery. I'm working on a simple jquery popup form that shows a thank you message once users complete it. However, I'm facing an issue with resetting the box to display the original form when a user closes it ...

javascriptjqueryhtml

The child outlet becomes empty after refreshing the URL with the ID sourced from the {{link-to}} method in Ember.js

I am facing a strange problem where the child outlet becomes empty every time I refresh the page with the id. I have a generated list using the {{link-to}} helper. <script type="text/x-handlebars" id="twod"> <div class="row"> ...

javascriptajaxember.js

Whenever attempting to update an individual element within an associative array in Vue 3, all values within the array end up being updated simultaneously

In my Vue3 code snippet, I have the following: data: function() { return { testData:[], } }, mounted() { var testObj = { name: 'aniket', lastname: 'mahadik' ...

vue.jsvuejs3

Exploring the process of iterating through and organizing a JavaScript array

Recently, I encountered a JavaScript object that was generated by a particular API. The object is structured in a way that it can potentially have multiple instances of the same 'equity' (such as Hitachi Home in this case): { "results": { ...

javascriptjsonobject

What could be causing this function to work in Google Chrome, but not in Firefox?

For some reason, in Firefox, this section of the code never returns true. However, it works perfectly fine in Google Chrome. if(restrictCharacters(this, event, digitsOnly)==true) The expected behavior is that if a user inputs a number from 1 to 5 in the ...

javascript

Tips for identifying a webpage and making class modifications based on it

I am working on a customized bar with 4 distinct parts. Each part corresponds to a different page on the website. I want each part of the bar to change color based on which page the user is currently browsing. For example, if the user is on page A, I want ...

javascriptjqueryhtmlcss

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

What is the best way to delay Angular for 5 seconds before initiating a page transition?

Just a quick inquiry - is there a way to have Angular wait for 5 seconds before redirecting to a different page? I attempted to implement this functionality within my function, but it doesn't appear to be functioning as expected: setTimeout(() => ...

javascriptangular

Insert an HTML page into a div element

I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...

javascriptjqueryhtmlangularjs

Exploring methods to retrieve information from fs.readFile in vuejs3

I need some help with this code snippet I'm working on: //package.js "scripts": { "serve": "node readFile.js & vue-cli-service serve" }, //readFile.js const data = fs.readFileSync('path/file', 'utf-8 ...

node.jsvue.jswebpack

Provide input data to the function for delivery purposes

Creating a simple webpage with a form input that triggers a script to request JSON data from the server based on the user's input. The challenge is passing the value from the input field to a function for processing. var search = document.querySele ...

javascriptjqueryinput

Mounting a Vue3 component within an established application: Step-by-step guide

Imagine we have already mounted an App in main.js: createApp(App).mount('#app'); Now, I want to create a function that is called like this: createModal({ render: () => <SomeComponent />, }); Typically, we would impl ...

javascriptvue.jsvuejs3