How can I retrieve a key in a date format in VUE using Javascript?

I am dealing with an array of dates and an object structured like this:

[
{'2020-04-01': {name: 'john', sex: 'male'}, 'id': 222},
{'2020-04-02': {name: 'jane', sex: 'female'}, 'id': 111}
]

For some reason, I opted to use an HTML table instead of a Vue datatable. However, when trying to access the date key, nothing is displayed. The rendering code looks like this..

...
...
<tbody>
    <tr v-for="item in body_data">
        <template v-for="date in date_range">
            <td>{{item.id}}</td> //works fine
            <td>{{item.date.name}}</td> //displays nothing, and no error is shown
        </template>
    </tr>
</tbody>

Could it be because I cannot use a date as a key? Or did I make an incorrect call?

Apologies for any language errors

Answer №1

must be:

<th>{{element[date].name}}</th>

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

Highlighting PHP files as JavaScript files in Sublime Text for improved readability

I'm working with a group of .php files in Sublime Text that primarily consist of JavaScript code with some PHP constants mixed in. Is there a way to configure Sublime Text to consistently highlight these files as JavaScript instead of PHP without havi ...

Creating objects with adjustable X and Y positions based on HTML Canvas dimensions

I'm in the process of developing a basic game that utilizes HTML5 Canvas technology. Within the canvas, I've incorporated multiple rectangles to enhance gameplay. However, one issue I've encountered is related to how I control the rectangl ...

Utilize jQuery to access and manipulate a JSON array object

Hi there, I am working with an ajax request that is returning the following data: [[{"totalloginhours":"11.17"}],[{"totalagents":"2"}],[{"totalapplications":"2"}]] I'm wondering how I can access this string using jQuery without needing to loop throu ...

JavaScript for Office Spreadsheet Titles

I'm having trouble fetching the names of sheets from an external Excel file, as I keep getting an empty array. async function retrieveSheetNames() { const fileInput = <HTMLInputElement>document.getElementById("file"); const fileReader ...

ReactJS tweet screenshot capture

Currently seeking a solution to capture a tweet screenshot, store it in a PostgreSQL database, and display it on my ReactJS webpage using Typescript. I have been utilizing react-tweet-embed for displaying the tweet, but now I require a method to save the i ...

Displaying a message when there are no results in Vue.js using transition-group and encountering the error message "children must be keyed

Utilizing vue.js, I crafted a small data filter tool that boasts sleek transitions for added flair. However, I encountered an issue with displaying a message when there are no results matching the current filters. Here's what I attempted: <transit ...

Converting strings to different data types: undefined, null, number, or boolean

Is there a more efficient and faster method to convert a string to its respective value type? I usually rely on this function for type conversion: var convertType = function (value){ if (value === "undefined") return undefined; if (value === "nul ...

Use an image from an array and assign it as the background image for a specific class on an HTML page by

In my array called items, there are three items. I randomly selected 2 items, took their labels, and displayed them in 2 boxes within a <p> tag. I want the URL of the selected item to be displayed as a background image of the corresponding box. For ...

Is it possible to obtain a reference to the object with _.find? What is the correct way to update a property of the resultant object

When using lodash find to query an object from an array and then setting a property of that object, the array remains unchanged when printed out. I would appreciate feedback from someone with more experience in handling objects with lodash in JavaScript. ...

Analyzing two disorganized sets in MongoDB

I need to compare a large number of documents stored in two collections. In total, there are approximately 1300 documents in each of these collections. My goal is to create a diff comparison report after comparing the two collections. My main focus is on ...

Using jQuery .load() can result in a callback function triggering multiple times

After running the code for the first time, it correctly displays: load complete However, on the second run, it shows: load complete load complete By the third run, it displays: load complete load complete load complete This pattern continues ...

`How can textures be added to the front and back of a shape in Three.js geometry?`

I'm currently working on creating a flat shape geometry with rounded corners. Below is a snippet of the code I have so far: var geometry = new THREE.ShapeGeometry(shape); var front_material = new THREE.MeshPhongMaterial({ map: frontTexture, s ...

Leverage require.js in combination with angular.js

Seeking assistance with require.js integration in Angular.js, encountering an error. Below is the code snippet: Configuration file: require.config({ paths: { angular: 'https://code.angularjs.org/1.5.5/angular.min', angularRo ...

Create a Vue component that utilizes the v-for directive to iterate through a list of items, passing data from a

Imagine having two arrays with a similar structure like this: const individuals = [{name: "Jane Doe", id: "0001"},{name: "John Doe", id:"0002"}, {name: "Sam Smith", id: "0003"}, {name: "Joe ...

Discover how to retrieve service response data from an API and populate it into the Select Option with Angular 2

Api.services.ts getListOfNames() { return this.http.get(this.BaseURL + 'welcome/getnama') .pipe(map(response => { return response; })); } After making the API call, I receive the following resp ...

Using jQuery to extract the value from a string using logical operations

One challenge I am facing involves manipulating a string stored in a jQuery variable (var str). The string looks like this: var str = 4-68,4-69,4-70,5-86,5-87,5-88,5-89,5-91,6-100,6-101 My goal is to organize the string and transform it into the followin ...

Convert the JSON response object into a string and assign it to a Cookie as the value

I came across a JSON object data that I would like to utilize as a cookie: https://i.sstatic.net/Ivq4n.jpg After converting this object to a string using JSON.stringify(), I encountered an issue when attempting to set it as a Cookie. The process of setti ...

Navigating to a randomly generated ID in Firestore using Vue - A Step-by-Step Guide

My app uses Firestore as a backend for posts. On the screen displaying all categories, when a new category is created it's added to the list. When a category is clicked, I use its id as a parameter to navigate to that specific category and show the po ...

"Firebase offers the flexibility to have several 'apps' configured, both on the client side and the server

Currently, I have a firebase app set up in my project for SSR using firebase-admin. However, I now want to add firebase@8 to be able to utilize it on the client-side and eventually apply firestore rules. The issue arises when I try to use firebase@8, I enc ...

Enhance the Error class in Typescript

I have been attempting to create a custom error using my "CustomError" class to be displayed in the console instead of the generic "Error", without any success: class CustomError extends Error { constructor(message: string) { super(`Lorem "${me ...