Implement a new feature in TypeORM that allows adding an array of objects to an

For my project, I require icons to be structured as an array of objects, similar to the format below:

[
    {
        "id": 1,
        "title": "Title text",
        "icons": [
            {
                "icon": "icon-1.png",
                "main": true
            },
            {
                "icon": "icon-2.png",
                "main": false
            },
            {
                "icon": "icon-3.png",
                "main": false
            }
        ]
    }
]

The entities involved are defined as follows:

@PrimaryGeneratedColumn()
  id: number;
  @Column()
  title: string;

Now the question arises, how can these icons be created?

javascriptarraysobjectnestjstypeorm

Answer №1

There are two options available for creating a new entity and associating it, or utilizing the jsonb type in your application.

  ...
  @Column({ type: 'jsonb', nullable: true, default: [] })
  icons: Icons[];
  ...

Define your Icons as follows:

export interface Icons {
  icon: string;
  main: boolean;
}

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

The issue arises when using an Angular directive with an input type set as "number"

When the input type is text, the code below works perfectly fine. However, it fails to function when the input type is changed to number. <div ng-app="myApp" ng-controller="myCtrl as model"> <input type="text" ng-model="cero" ng-decimal > ...

javascriptangularjsvalidationangularjs-directive

Issue with video.js text track memory leakage (WebVTT/VTT)

I am utilizing Video Text Tracks to showcase advanced live information on top of the video. A new video is loaded every few minutes, each with its own .webvtt file (consisting of 2-3k lines). Although everything is functioning properly, there is a persis ...

javascriptvue.jsmemory-leaksgarbage-collectionvideo.js

Tips for arranging various information into a unified column within an Antd Table

Is there a way to display multiple data elements in a single cell of an Ant Design table, as it currently only allows insertion of one data element? I am attempting to combine both the 'transactionType' and 'sourceNo' into a single cell ...

javascriptreactjstypescriptantd

Select2 loading screen featuring preloaded value

Trying to populate a select2 box with instrument options on an edit profile page for a musician site. The information is pulled from the database, but I'm struggling to display the existing instrument list in the select2 box upon render - it always ap ...

javascriptjquerycoffeescript

Tips for securely concealing login details during an API call

As a newcomer to the world of Javascript and Vue.js, I am eager to expand my knowledge in these areas. However, I have encountered an issue while attempting to call an API login that exposes a password in the request payload. It seems quite insecure to ha ...

javascriptvue.jsaxios

"Checkbox values not extracting correctly in PHP array, only showing 'Array' instead of actual

After following a suggestion to utilize the $_POST method for declaring an array from checkbox values, I implemented it. However, it is not functioning as expected. In the mysql table below, only the text "Array" is being stored. None of the checked value ...

phpmysqlarrays

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

javascriptnode.jsreactjsnpmnpm-start

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

javascriptjqueryhtmlcss

Fetch response headers not being detected by Web Worker

Currently in my chrome extension, I'm utilizing web workers to collect response header cookies from a specific website. Interestingly, when I execute the request on the main thread, the response contains all the expected cookies. However, when the exa ...

javascriptgoogle-chrome-extensionfetchweb-worker

Expansive image coverage

My footer design includes a rounded left image, a repeating middle section, and a rounded right image. How can I ensure that it scales perfectly responsively without overlapping? Ideally, the solution would involve adjusting the width of the middle section ...

javascripthtmlcsswidth

I encountered a crash in my app because of an error in my Node.js backend code that was posting the accessories and slug into the database

My node.js backend code is responsible for adding the accessory and slug to the database, but I am encountering app crashes. const express=require('express'); const Category = require("../models/Category"); const slugify=require('s ...

javascriptnode.jsreactjsmongodb

Difficulty in switching state value from true to false in ReactJS

As a newcomer to the world of reactjs, I am currently experimenting with setting the state of input_active to true or false depending on onBlur and onFocus events. This allows me to dynamically change the style of the input element. Here is a snippet of t ...

javascriptreactjs

Troubles with modifying website background using JavaScript

I'm looking to update my website background using JavaScript, starting with buttons before moving to a drop-down menu. I have the following code that successfully changes the background when the button is clicked: function selectText(test){ var a ...

javascriptbackground

Incorporating useState into React Native navigation screens to dynamically update FlatList items

I'm working on implementing react-navigation to pass and update useState between screens in order to render a flatlist. The issue I am facing is that the flatlist updates correctly when I navigate back to the previous screen and then return to the com ...

javascriptnode.jsreact-nativereact-hooks

Encrypting the process of alphabet printing in C语言

In this coding program, each letter is encoded based on its numerical value. The rules are as follows: A–E: Multiply the value by 2 F–J: Divide the value by 3 and multiply the integer remainder by 5 K–O: Divide the value by 4 and multiply the integ ...

carraysloops

Having difficulty accessing the key values from an Object

This piece of code utilizes Axios to fetch data and store it in the myObject variable: const myObject = {} Object.entries(keysParameter).map((entry, index) => { axios .get(url) .then((res) => { myObject[entry[1].value] = re ...

javascriptreactjsaxios

Type of Angular Service Issue: string or null

I'm encountering a persistent issue with my Angular code, specifically while calling services in my application built on Angular 13. The problem arises when trying to access the user API from the backend, leading to recurrent errors. Despite extensive ...

javascriptjsonangularapirest

Issue (@websanova/vue-auth): http plugin has not been properly configured in drivers/http/axios.js

I've been working on integrating vue-auth into my laravel-vue application, but I'm encountering some console errors: Error (@websanova/vue-auth): drivers/http/axios.js: http plugin has not been set. Uncaught TypeError: this.plugins.http is u ...

javascriptlaravelvue.jsauthentication

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

Encountering a 400 Bad Request error when attempting to post data, but still managing to successfully save

CODE OPERATION: STORING USER DATA IN DATABASE AS A NEW APP USER REGISTRATION. ISSUE: DATA IS SAVED, BUT RECEIVING "400 BAD REQUEST" AND ERROR MESSAGE IN CONSOLE ERROR: "Cannot save() the same document multiple times in parallel" SCRIPT (GENERATING JWT T ...

javascriptmongodbjwt