Encountering an issue while attempting to fetch a value from a nested object property with VueJS Interpolation

I'm struggling to properly display nested arrays in Vue JS. Below is a snippet of my JSON data:

{
  "id": 1,
  "slug": "test-page",
  "banner": {
    "title": "banner title",
    "subTitle": "my sub title",
    "hasSubTitle": false,
    "hasClass": "jumbotron-houses jumbotron-page"
  },
  "pageTitle": "Test Page",
  "pageDescription": "My Page Description",
  "content": "<h1>test</h1>"
}

My goal is to display the banner title along with each element in the banner object. I've attempted the following code:

{{ page.banner['title'] }}

However, this does not seem to work as expected. I also tried:

{{ page.banner[0] }}

If anyone has any insight on what could be missing or how to correctly achieve this, I would greatly appreciate it!

javascriptjsonvue.js

Answer №1

banner is not a list.

Here's an alternative approach:

{{ page.banner.title }}

demo

var page = {
  "id": 1,
  "slug": "test-page",
  "banner": {
    "title": "banner title",
    "subTitle": "my sub title",
    "hasSubTitle": false,
    "hasClass": "jumbotron-houses jumbotron-page"
  },
  "pageTitle": "Test Page",
  "pageDescription": "My Page Description",
  "content": "<h1>test</h1>"
};

document.body.innerText = page.banner.title;

Answer №2

It is important to verify the number of objects received from your Api call. If there are multiple objects, make sure to iterate through them using v-for. If there is only one object, access it directly.

{{ page[0].banner.title }}

Verify that the variable page is spelled correctly.

var page = [{
  "id": 1,
  "slug": "test-page",
  "banner": {
    "title": "banner title",
    "subTitle": "my sub title",
    "hasSubTitle": false,
    "hasClass": "jumbotron-houses jumbotron-page"
  },
  "pageTitle": "Test Page",
  "pageDescription": "My Page Description",
  "content": "<h1>test</h1>"
},
];

document.body.innerText = page[0].banner.title;

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

I am having trouble importing and using a Vue.js single-file component after the project has been built

I've been exploring ways to reuse some of my components from one repository in another repository. One of the components I'm working with is a single file component. To achieve this, I set up webpack to generate a .js bundle for that particular c ...

vue.jswebpack

Move files in Node.js without removing the original source directory

Currently, I am facing an issue while attempting to transfer files from one directory to another using the mv module. The problem arises when the files are successfully moved, but the source directory is automatically deleted. My intention is for only the ...

javascriptnode.js

What is the most effective way to transfer information between two pages in React JS?

I am a newcomer to react and currently working on a project that involves two pages/components. I collect user details on one page and need to display that data on another page. However, I am facing difficulties in achieving this. Can someone please provid ...

javascriptreactjsreact-props

Send back alternate HTML content if the request is not made via AJAX

Last time I asked this question, I received several negative responses. This time, I will try to be more clear. Here is the structure of a website: Mainpage (Containing all resources and scripts) All Other pages (HTML only consists of elements of that ...

javascriptphpjqueryhtmlajax

Using Express.js to send a response while simultaneously executing a background task

When working with Express.js, I have a need to execute a task after sending a response. My main goal is to minimize the response time and send back the response immediately without waiting for the task results to be returned to the client. The task itself ...

javascriptnode.jsexpress

Incomplete JSON response being received

We set up an express server to call an API and successfully requested the JSON object in our server. However, we are facing an issue where the JSON data is getting cut off when being displayed as a complete object on the client side. We tried using parse i ...

javascriptjsonreactjsexpress

What is the extent of an object within a JavaScript Array?

Exploring scopes in JavaScript has led me to an interesting discovery when calling functions from an array. In the example below, I experiment with three different scopes: one bound to an Object named foobar, one bound to window, and a third one which po ...

javascript

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Currently facing a puzzling issue with an 'undefined' exception. Developing a tool to track distance traveled between two locations, leveraging Google Maps distance matrix. Upon selecting a vehicle, entering an origin and destination, and clickin ...

javascripthtmlgoogle-maps

I am looking to update the count value in a Vue app by utilizing v-model within the Vuex store

I am experiencing an issue where this code does not generate an error, but when I change the count it does not reflect on the screen. Can someone please assist me in resolving this problem? import Vue from 'vue' import Vuex from 'vuex&ap ...

vue.jsvuetify.jsvuex

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

javascripthtmlangulartypescriptservice

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

Currently working on a website project that involves accessing and manipulating the display property of a menu. The goal is to toggle the menu open or closed based on its current state. In my setup, the initial state of the menu is defined as closed using ...

javascriptcssmedia-queries

Exploring the method to deactivate and verify a checkbox by searching within an array of values in my TypeScript file

I am working on a project where I have a select field with checkboxes. My goal is to disable and check the checkboxes based on values from a string array. I am using Angular in my .ts file. this.claimNames = any[]; <div class="row container"> ...

javascriptangulartypescripthtml-select

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

javascriptcssangularsassangular-cli

Ways to utilize built-in features from a Java library that has been incorporated

I have embarked on a project to create a Nativescript wrapper for a Java library in order to harness its functionalities for a Nativescript application. Despite the lack of detailed articles on this topic, I have decided to turn this into a plugin wrapper ...

javascriptjavaandroidnativescript

What steps can be taken to ensure that an ObjectID does not transition into a primitive form

Is there a way to avoid an ObjectID from being converted into a primitive data type when transferring in and out of Redis? Would converting it to a JSON string be a possible solution? Thanks! ...

javascriptnode.jsredis

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

javascripthtmlcssvariablesfrontend

Leveraging the power of javascript to include content before and after

I am looking to understand how I can insert an HTML element before and after certain elements. For example, let's say we have the following code in a real file: <ul class="abcd" id="abcd></ul> How can I display it like this using JavaScr ...

javascriptphphtmlreplace

looking to get into deeper levels of JSON data with json.load

I have implemented Hufman's Honeywell Python code to extract data from the MyTotalConnectComfort website. The code can be accessed here. I made adjustments to the code for compatibility with version 2.7 and integrated Flask into the process. Upon cal ...

pythonjsonflaskhoneywell

Enhance Odoo Conversations (mail)

I've been attempting to customize the Odoo discussions, but have hit a roadblock. Here is my goal: https://i.sstatic.net/1lJnc.png I am adding messages using the "New Message" button to an Odoo module (in class mro.order). The messages are appearing ...

javascriptpythonodoo

When extracting text using .text(), remember to include spaces between td elements

Is there a method to include space between td's when using .text()? I have searched extensively on Google but could only find information on how to trim space. The code I am currently using is as follows: for (var i = 0, len = rows.length; i < l ...

javascriptjquery