There was a rendering error: "Type Error: Unable to access the 'PAY_TYPE' property of null"

I am attempting to retrieve the PAY_TYPE value from the callback_details object by using JSON.parse() function to convert a string into an object. However, I keep encountering an error related to the question's title.

Here is my code snippet:

<td class="text-xs-left">{{props.item.payment_method}}<br>({{JSON.parse(props.item.callback_details).PAY_TYPE}})</td>

Inside the data() method:

data(){
return{
  loading: false,
  startDate: '',
  endDate: '',
  startMenu: false,
  endMenu: false,
  pagination:{
    rowsPerPage: -1
  },
  orders:[],
  payment:[],
  list1: [],
  list2: [],
  payment_headers:[
    { text: this.$translate('merchant'),     value: 'merchant' },
    { text: this.$translate('shop_owner'),    value: 'shop_owner', sortable: false },
    { text: this.$translate('platform_fee'),      value: 'platformFee', sortable: false },
    { text: this.$translate('total_earning'),      value: '', sortable: false }
  ],
  details_headers:[
    { text: this.$translate('shop_name'),    value: 'shop_name' },
    { text: this.$translate('date'),    value: 'created' },
    { text: this.$translate('buyer_yippi'),    value: 'yippiWallet' },
    { text: this.$translate('purchase'),       value: 'yippsAmount', sortable: false },
    { text: this.$translate('payment_type'),    value: 'payment_method', sortable: false},
    { text: this.$translate('platform_fee'),      value: 'platformFee', sortable: false },
    { text: this.$translate('earning_fee'),      value: '', sortable: false }
  ],
  json:{},
  count: 0,
  tableSettingsOne: {
            descending: true,
            sortBy: null,
            rowsPerPage: 25,
            pageSizes: [
                {"text":"5","value":5},
                {"text":"10","value":10},
                {"text":"25","value":25},
                {"text":"50","value":50},
                {"text":"All","value":-1}
            ]
    },
    tableSettingsTwo: {
            descending: true,
            sortBy: null,
            rowsPerPage: 25,
            pageSizes: [
                {"text":"5","value":5},
                {"text":"10","value":10},
                {"text":"25","value":25},
                {"text":"50","value":50},
                {"text":"All","value":-1}
            ]
    }
}

In order to display the PAY_TYPE from the callback_details:

callback_details: "{"TXN_ID":"262439","PAY_TYPE":"VISAMASTER","STATUS_INFO":"2003267b9029b3b"}"

However, I keep receiving the following errors:

[Vue warn]: Error in render: "TypeError: Cannot read property 'PAY_TYPE' of null"

TypeError: Cannot read property 'PAY_TYPE' of null

If anyone knows how to resolve this issue, your help would be greatly appreciated. Thank you.

javascriptvue.js

Answer №1

There seems to be an additional quotation mark in the callback_details section:

callback_details: {"TXN_ID":"262439","PAY_TYPE":"VISAMASTER","STATUS_INFO":"2003267b9029b3b"}

Answer №2

Give this a shot. 

  details: JSON.parse('{"ID":"262439","TYPE":"VISAMASTER","INFO":"2003267b9029b3b"}');

Additionally, 

<td class="align-left">{{props.item.method}}<br>({{props.item.details.TYPE}})</td>

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

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

cssvue.jsvuetify.js

Manipulating JSON data in JavaScript

Currently delving into learning JSON as required for work purposes... I am attempting to dynamically add and delete records to a JSON object... Can anyone shed some light on why I keep receiving an UNDEFINED message? Here is the code... Appreciate any as ...

javascriptjson

Eliminate the object's item before storing it

Attempting to simplify the explanation as much as possible, in my form there is a select dropdown where users can choose from multiple contracts. Once a contract is selected, I aim to remove certain items from that specific contract before saving it. The ...

vue.jsvuejs2vuetify.js

Storing user input in MongoDB after encoding

I am currently exploring the most effective methods for storing and presenting user input in MongoDB. In traditional SQL databases, it is necessary to encode all user input as a precaution against injection attacks. However, in the context of MongoDB, ther ...

javascriptpythonajaxmongodbunicode

Is there a way to modify my code to restrict users from liking a post multiple times?

I am currently working on a like system and I have made some progress. However, I am struggling to make it so that the likes only increment once. Does anyone have any insights or suggestions on how to achieve this? I have considered using session variables ...

javascriptphphtmljqueryajax

Inheritance best practices for node.js applications

In C#, the concept of inheritance can be easily demonstrated through classes like Animal and Dog. class Animal { string name; public Animal() { } } class Dog : Animal { public Dog() : base() { this.name = "Dog"; } } When working ...

javascriptnode.jsinheritance

performing a GET request directly from a <script> element in the index.html file

I am currently developing an application that utilizes Angular.js on the client side and Node Express on the server side. On my server side, I am using a staticAsset module. Within my index.html file, I have a lengthy list of JavaScript files that need t ...

javascripthtmlnode.jsangularjsexpress

The scroll function triggers even upon the initial loading of the page

Trying to solve the challenge of creating a fullscreen slider similar to the one described in this question, I created a jsfiddle (currently on hold) Despite knowing that scrolling too fast causes bugs and that scrolling both ways has the same effect, m ...

javascriptjqueryhtmlcssevents

Challenge with Transferring Data to be Displayed

My issue lies in calling a function with 3 inputs - 2 numbers and 1 string. The two numbers are being passed correctly, but I need the string to be printed within the element. I suspect the problem is related to passing the parameter to an HTML part of th ...

javascriptmaterial-uipass-by-value

Retrieving vue-cli-version-marker from local source

Whenever I try running vue ui without administrative privileges, the following error occurs: Failed to receive a response from https://registry.npmjs.org/vue-cli-version-marker However, when run with admin rights, it works. This issue seems to be connecte ...

vue.js

Scroll a div using JavaScript/jQuery

I'm currently facing some challenges in resolving this issue. My goal is to pan a DIV using jQuery. The process is quite straightforward - on mouseDown, I capture X & Y coordinates and then subtract them from the newly obtained X & Y values during mou ...

javascriptjquery

Tips for successfully typing the backtick character when transitioning to Typescript:

I am currently working on a Typescript Vue project involving Leaflet. I came across some code for lazy-loading map markers, but it was written in Javascript. Although the code works fine, I keep receiving errors and warnings from VSCode because this is not ...

typescriptvue.js

The speed at which Laravel loads local CSS and JS resources is notably sluggish

Experiencing slow loading times for local resources in my Laravel project has been a major issue. The files are unusually small and the cdn is much faster in comparison. Is there a way to resolve this problem? https://i.stack.imgur.com/y5gWF.jpg ...

javascriptcssperformancelaravel-5assets

Adding an external JavaScript library file to a specific component in Angular 7 is a straightforward process. Let's walk through the

As a beginner in Angular framework, I've encountered an issue while working on creating a custom HTML template using Angular version 7. My template consists of various pages like home, about, product, etc. Specifically, on the home page, I am trying t ...

javascriptangularslidy

Is it acceptable to assign a value to exports.new?

In my venture with Node.js and Express, I am aiming for simplicity. Drawing from my experience with Rails, I am following the RESTful structure typical in Rails applications. In setting up my controllers (or routes), I want them to resemble this: // route ...

javascriptnode.jsexpress

Is it possible to transmit a WebRTC frame to a Python script?

I recently built my first web app using Python and Django, which displays webcam frames of clients. 'use strict'; // For this project, I am only streaming video (video: true). const mediaStreamConstraints = { video: true, }; // Video element ...

javascriptpythondjangowebrtc

What is preventing Vue from recognizing Vuex?

I specialize in working with microfrontend single-spa (). As part of my process, I create a store: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { } }) ...

vue.jsvuejs2vuex

What is the best way to showcase two div elements side by side within my carousel

/* Implementing slideshow functionality */ var currentIndex = 0; displaySlides(); function displaySlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i ...

javascriptjqueryhtmlcss

Updating default values in reactive() functions in Vue 3: A step-by-step guide

Currently, I am in the process of developing an application using Nuxt 3 and implementing the Composition API for handling async data. The specific scenario I am facing is this: I have a page that displays articles fetched from the database using useLazyFe ...

javascriptvue.jsnuxt.jsvuejs3nuxtjs3

Is there a way to trigger the second function once the first one has been completed?

When the change event occurs, I am invoking two functions. function1(); function2(); The function1() makes an ajax call. The function2() is running before function1() for some reason. Can anyone explain why this is happening? Any assistance would be ...

javascriptjquery