DEVY

Sorry, boss

No Authz!

Objects

Object Handling

Embedded

Data

An array of objects is embedded in the script area of this page as:


export const embeddedArray = [
    { title: 'Object 1', descr: 'Description 1', },
    { title: 'Object 2', descr: 'Description 2', },
    { title: 'Object 3', descr: 'Description 3', },
]

Code

It can be rendered using the v-for = "object in embeddedrray" conditional

Output

Title: Object 1, Description 1 Title: Object 2, Description 2 Title: Object 3, Description 3

From External File

Sample Object Array

Sample array of objects in $SAMPLE_DATA/sampleObjectArray.ts:

export const sampleObjectArray = [
    { 
        title: 'Object 1', 
        description: 'Description 1',
    },
    { 
        title: 'Object 2', 
        description: 'Description 2',
    },
]

Retrieve Object Array

Title: Object 1 Description: Description 1
Title: Object 2 Description: Description 2

Render All Array Contents

Route: Object 1

            {
  "title": "Object 1",
  "description": "Description 1"
}

Route: Object 2

            {
  "title": "Object 2",
  "description": "Description 2"
}

Complex Object Array

Data Source

The 'complexObject' and its sub-objects, and TypeScript Interfaces, are all defined in '$SAMPLE_DATA/sampleArrays.ts':

Interfaces

Interfaces structure data to make it type-safe.

Code

The DataComplexDataObject component renders each object as a simple card. Union types string | NamedTag and conditional rendering, are usec to handle variation of data type in a single property.

The Cards

Object 1

This is the first object.

Tag A
Tag B
Tag C

Object 2

This is the second object.

Tag D
Tag E