In the AdminUI model of KeystoneJS, showcase the abundance of many-to-many relationships

Currently, I am familiarizing myself with KeystoneJS and attempting to showcase the many-to-many connections in the AdminUI.

I have established two models: playlist and trailer. Their many-to-many relationship is defined as follows:

models/Playlist.js 

Playlist.add('Playlist', {
        name: { type: Types.Text, initial: true, required: true, index: true, unique: true },
        description: { type: Types.Textarea, initial: true, required: true },
    }
);

Playlist.relationship({ ref: 'Trailer', refPath: 'title', path: 'trailers' });

models/Trailer.js

Trailer.add('Trailer', {
title: { type: Types.Text, required: true, initial: true, index: true },
playlists: { type: Types.Relationship, ref: 'Playlist', many: true },
}
)

The relationship has been correctly structured in MongoDB; there is an array of trailer ObjectID's stored in the playlist's trailers field. However, when viewing the Playlist in the AdminUI, it only displays "No related trailers..."

Why is this not functioning as expected? My goal is to visualize the relationship in the AdminUI.

The documentation regarding this functionality seems unhelpful. It consists of random code snippets without proper context. Despite following the example in Practical Keystone JS, I have not had any success.

javascriptmongodbmany-to-manyrelationshipkeystonejs

Answer №1

Concerning the choices for relationships:

path refers to the desired name for the field on the model. In this scenario, we could name it 'trailers'.

ref indicates the Model being referenced (the one containing the relationship field). Here, it is 'Trailer'.

refPath represents the field in the referenced model that establishes the relationship. In this case, it's 'playlists'.

Give this a try:

// models/Playlist.js

var Playlist = new keystone.List('Playlist');

Playlist.add({
  name: { type: Types.Text, initial: true, required: true, index: true, unique: true },
  description: { type: Types.Textarea, initial: true, required: true },
});

Playlist.relationship({ path: 'trailers', ref: 'Trailer', refPath: 'playlists' });

// models/Trailer.js

var Trailer = new keystone.List('Trailer');

Trailer.add({
  title: { type: Types.Text, required: true, initial: true, index: true },
  playlists: { type: Types.Relationship, ref: 'Playlist', many: true },
});

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

Deciphering WHERE conditions in a Node.js environment

Looking to convert the WHERE clause of a MySQL query into an expression for extracting data from a JSON file. For instance: `price`=8.95 AND `title`="The Lord price= AND of the Rings" The above example should transform into the following string after su ...

javascriptnode.jsregex

"Learn how to dynamically update the user interface in express.js using handlebars without having to refresh the

As a newcomer to using express.js and Handlebars, I am faced with the challenge of implementing autocomplete functionality. Specifically, I want to enable autocompletion in a text input field without triggering a page refresh when users interact with it. C ...

javascriptnode.jsexpresshandlebars.js

Caution: npm installation warns about potential issues

After encountering some WARN messages, I attempted to update npm by running npm audit fix However, this resulted in even more WARN messages. When I tried to install all dependencies using npm i I was bombarded with a plethora of WARN messages (see below) ...

javascriptnode.jsnpm

The active tab will dynamically update, however, clicking anywhere on the page will always bring you back to the first tab as

My view includes the following tabs: <div class="tabbable"> <ul class="nav nav-tabs padding-18"> <li class="active"> <a aria-expanded="false" data-toggle="tab" href="#Tab1"> <i class="green ac ...

javascriptjqueryasp.net-mvc

A method in JQuery to replace an input with a select element is by using the replace

I have multiple input fields with pre-existing values. My goal is to replace these inputs with select dropdowns that have the same options while retaining the original values. Here is the current HTML structure: <span id="span1"> <input type=" ...

javascripthtmljquery

Even though I've already assigned a key prop in React, I am still receiving a warning message about the

In the following code snippet, I am creating a note card element with a specific key. However, whenever I attempt to edit my note element, I encounter a warning that states: Warning: Each child in a list should have a unique "key" prop. Here is a portion ...

javascriptreactjs

What is the process for reversing styles on the second click?

This is the script I've written: function displayPanel(index, colorCode) { buttons.forEach(function(button){ button.style.borderBottom=""; }); tabButtons[index].style.borderBottom="none"; panels.forEach(function(panel){ ...

javascriptjqueryhtml

Steps to successfully retrieve an image using JavaScript on the client side while circumventing any CORS errors

I have a React application where I am displaying an image (an SVG) and I want the user to be able to download it by clicking on a button. The image is stored in Firebase Storage. However, I am encountering an issue with CORS error: Access to fetch at &ap ...

javascriptreactjscors

What is the method to ensure that the data submitted through an HTML form can dynamically update the text content on a webpage?

Trying to set the response of a POST request as the text within an element with id="answer". Here is the HTML form: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http:// ...

javascriptjqueryhtmlajaxforms

Continuously making ajax requests as each one finishes

I am facing a situation where I have multiple ajax calls that need to be executed one after the other in a sequence. Initially, chaining them together manually worked fine with a few calls. However, now that there are around 20 ajax calls, it has become me ...

javascriptjqueryajax

"Using the selected option from a dropdown list to pass to a PHP file for autocomplete functionality

Although there is no error in the code, I am facing an issue where, after selecting an option from the brands dropdown, when I type in the product field, it passes "%" instead of the brand id (1, 2, or 3). Is there a way to modify the code so that it passe ...

javascriptajaxjquery-autocomplete

Transfer data from a file to a PHP file using the XMLHttpRequest object in JavaScript and receive

I'm attempting to use AJAX to send an image file to a PHP file. The issue is that even though the script sends the object, my parser isn't able to retrieve the $_FILES["avatar"]["name"] and tmp_name values. Is there a method to transfer the file ...

javascriptphpajax

"Creating a fixed header with jQuery by manipulating the offset and scrollTop

My goal is to create a smooth scrolling website that scrolls vertically using jQuery. I found a helpful tutorial called Smooth Scrolling Website and have been following it closely to build my site. However, I'm facing an issue with a fixed header - t ...

javascriptjqueryhtmlcss

Issue encountered while utilizing property dependent on ViewChildren

Recently, I designed a custom component which houses a form under <address></address>. Meanwhile, there is a parent component that contains an array of these components: @ViewChildren(AddressComponent) addressComponents: QueryList<AddressCo ...

javascriptangularangular2-templateangular2-forms

Traverse a collection of nested objects containing arrays as their values

Consider the following object: { "apples": [ "one", "two" ], "oranges": [ "three", "four" ] } If I want to find the value four within this object, how can I do so efficiently? Would a loop work, like the one shown below? for (var ...

javascriptarraysjsonsorting

Angular version 1.6 with ES6, no errors in the application

Can you help me understand this? Note: I am using ui-router, and I suspect that is the issue. $stateProvider .state('login',{ url:'/', /*controller:'loginController',*/ controller: function(){aler ...

javascriptangularjsecmascript-6angular-ui-router

Exploring a property within a JavaScript object

Within my code, I am working with an array of objects called user. When I try to log the first object using console.log(user[0]);, I receive this output: Object {activityId: "2", id: "1", activityDt: "01/15/2016"} Afterwards, I attempt to store user[0] in ...

javascriptangularjs

What is the proper way to add an object to an array within an object in TypeScript?

import {Schedule} from './schedule.model'; export class ScheduleService{ private schedules:Schedule[]=[ new Schedule("5:00","reading"), new Schedule("6:00","writing"), new Schedule("7:00","cleaning") ]; getSchedule(){ ret ...

javascriptarraysangular

Tips on keeping a floating sidebar afloat as ajax content loads

I'm quite the beginner in JavaScript, so here's my question. I have a floating sidebar that stops floating when it reaches the footer. Here is the JavaScript code: $(window).load(function(){ $(function() { var top = $('#sidebar ...

javascriptjqueryajaxsidebarsticky

How can I change an array to a string in JavaScript/jQuery and add a specific

Currently, I am tasked with the challenge of converting an array into objects. Furthermore, I also need to add something before each object is displayed. var arrayList = ["image1.jpg","image2.jpg","image3.jpg"]; The desired outcome should look like this ...

javascriptjqueryarraysstring