Displaying JSON data using Vue.js

fetching JSON data

save

movieData: {}
......
retrieveMovieData (context, parameter) {
     axios.get(API.movieData + parameter.id)
      .then(response => {
        context.commit('MOVIE_DATA', response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }

.js file

<template>
  <section>
    <div v-for="item in movieData">
      <p>{{item.summary}}</p>
    </div>
  </section>
</template>
......
export default {
  name: 'info',
  computed: {
    ...mapState(['movieData'])
  },
  mounted () {
    let _id = this.$route.params.id
    this.$store.dispatch('retrieveMovieData', {
     id: _id
    })
  }
}

I am trying to display information on my page, such as summary, but the chrome Dev tools console shows an error message "TypeError: Cannot read property 'summary' of null",

I have been attempting different methods.

Answer №1

Implement a guard to prevent rendering before the items are retrieved:

<template>
  <section v-if="filmDetails && filmDetails.length">
    <div v-for="item in filmDetails">
      <p>{{item.summary}}</p>
    </div>
  </section>
</template>

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

Monitoring inbound and outbound traffic in express middleware

I am in the process of incorporating a logger into my Express application. This logger needs to record both requests and responses (including status codes and body content) for each request made. My initial approach involves creating a middleware function ...

Ag-Grid is failing to display MenuTabs

I need help getting the columns menu tab to appear in Ag-Grid. It should be a simple task. I want both the general and columns tabs, similar to the demo shown here Currently, when I specify both tabs, only the general tab is displayed. If I specify just t ...

Separating Angular controllers into their own files can help prevent errors like "undefined is not a

I am currently revamping some Angular code and my goal is to organize things by type, such as keeping controllers in a separate folder. Currently, I have two controllers and an app.js file. However, I am encountering an issue with the error message "undef ...

Passing a value from a function to a label for a checkbox input in Vue.js3 will allow the label to dynamically change based on the boolean value of

<template> <div> <input @change="change($event)" type="checkbox" id="check" v-model="checked" class="toggle" /> <label for="check" >{{ status }}</la ...

Guide to effectively utilizing Vue slot-scope feature within nested components

I am currently facing difficulties in understanding the proper usage of the slot-scope attribute and comprehending the documentation. Below is a simplified version of my requirement. You can view it in action here: https://jsfiddle.net/4j4zsy0g/ Main Cod ...

Unable to process JSON array

One issue I'm facing is with an 'onload' handler for my web page. The javascript function 'handleLoad()' that it calls has suddenly stopped working, specifically not being invoked after attempting to pass the output of json_encode ...

Having trouble parsing JSON data? Wondering how to troubleshoot this issue?

I need help with an API call that is causing an error. The code for my getData() function is as follows: func getData(from url: String) { URLSession.shared.dataTask(with: URL(string: url)!, completionHandler: { data, response, error in guard let da ...

Troubleshooting Dynamic Input Issue - Incorrect Appending Behaviour - Image Attached

I am working on a project that involves adding input fields dynamically using JavaScript. However, I've encountered an issue where the styling of the first input field is not applied correctly when it is clicked for the first time. You can see the dif ...

How to extract data from JSON files using Angular 12

Having trouble with Angular and TypeScript. Need to fetch a GET API from Spring where the return variable is Page, but the JSON structure looks like this: "content": [ { "id": 1, "category": "TSHIRT&qu ...

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

Script is functioning as expected in Google Chrome, but is not responsive in IE and Mozilla browsers JavaScript code: <script src="jquery.min.js"></script> <script> function Run() { if(jQuery('#inputtext').val() == '0 ...

Error message occurs when trying to use the `memo` method on a `nil` object class while using the `best

I have successfully added a basic memo feature to my app and enabled in-place editing using the best_in_place gem. However, I am encountering an issue when trying to create new memos with in-place editing. The code snippet I have been using is causing an ...

How can I quickly upload a file while load balancing?

I recently developed an application in node js that includes a load balancing feature. I set up separate servers - one for the database and another for managing requests. The issue arises when users upload files using multer in Express, as the file gets up ...

Disabling the search function when it is clicked (before any actions are taken)

I've recently implemented a search form on my website, where the search field opens up upon clicking the search icon.https://i.stack.imgur.com/UeErx.png To make the search icon clickable, I disabled the search function. var $searchBtn = $search.find ...

Exploring the Differences between Angular's Http Module and the Fetch API

While I grasp the process Angular uses for HTTP requests, I find myself leaning towards utilizing the Fetch API instead. It eliminates the need to subscribe and unsubscribe just for a single request, making it more straightforward. When I integrated it int ...

What are some ways to capture and save the window width prior to launching my Nuxt application?

I am working on a Nuxt application where I need to display different components based on the window width and send a request to create a session with the device width as one of the header parameters. Here is my approach: In my store code: //index.js expor ...

Tips for effectively utilizing the display:none property to conceal elements and permanently eliminate them from the DOM

While working on my website, I utilized CSS media queries to hide certain elements by using display: none. Even though this effectively hides the element from view, it still lingers in the DOM. Is there a way to completely eliminate the element from the ...

I am perplexed as to why the Jackson ObjectMapper is throwing an error while attempting to convert a JSON field into a Date object. It seems that it is unable to

I am facing an issue with mapping a JSON object to a DTO class using Jackson ObjectMapper. Here is the JSON object: { "dateTime": "2020-06-13 20:00:15", "timeStampMs": "130", "sensor001DV": "37.2", "sensor002DV": "40.5" ............... ...

Learn how to personalize your Material UI icon by incorporating a plus symbol

Is it possible to add a plus sign to material ui icons? I currently have the following icon: import ApartmentIcon from '@mui/icons-material/Apartment'; https://i.sstatic.net/FejuX.png I would like to add a plus sign to this icon, similar to t ...

Vue component data calculation

While taking a course at Vue Mastery, I came across the following code snippet: export default { data() { const times = [] for (let i = 1; i <= 24; i++) { times.push(i + ':00') } return { ...

Angular constantly looping due to $watchCollection being triggered repeatedly

I am interested in monitoring the changes of an object, referred to as x, specifically its properties which are checkboxes. When a user checks a box, it alters the checked property (prop1) to 1. Each property contains certain content, and when enabled, it ...