We Keep Coding

Strapi: trouble populating multi-valued attribute for nested relation

I have a collection called dish-category which contains many dishes, and a dish collection that contains many dish-options (another collection).
the list of dishes from each dish-category is available in the API but the nested collection of dish options from each dish is not available on strapi.
the following are the settings for my models:
dish-category.settings.json:
{
"kind": "collectionType",
"collectionName": "dish_categories",
"info": {
"name": "DishCategory",
"description": ""
},
"options": {
"increments": true,
"timestamps": true,
"draftAndPublish": true
},
"pluginOptions": {},
"attributes": {
"Name": {
"type": "string"
},
"Description": {
"type": "text"
},
"dishes": {
"collection": "dish",
"via": "dish_category"
}
}
}
dish.settings.json:
{
"kind": "collectionType",
"collectionName": "dishes",
"info": {
"name": "Dish",
"description": ""
},
"options": {
"increments": true,
"timestamps": true,
"draftAndPublish": true
},
"pluginOptions": {},
"attributes": {
"Name": {
"type": "string"
},
"Description": {
"type": "text"
},
"Total": {
"type": "decimal",
"min": 0,
"required": false,
"default": 0
},
"dish_categories": {
"collection": "dish-category"
},
"dish_options": {
"collection": "dish-option",
"via": "dish"
},
"dish_category": {
"via": "dishes",
"model": "dish-category"
}
}
}
dish-option.settings.json:
{
"kind": "collectionType",
"collectionName": "dish_options",
"info": {
"name": "DishOption",
"description": ""
},
"options": {
"increments": true,
"timestamps": true,
"draftAndPublish": true
},
"pluginOptions": {},
"attributes": {
"Name": {
"type": "string"
},
"Price": {
"type": "decimal",
"min": 0,
"default": 0
},
"dish": {
"via": "dish_options",
"model": "dish"
}
}
}
on the dish-category/controllers/dish-category.js file I tried populating the attribute:
'use strict';
/**
* Read the documentation (https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#core-controllers)
* to customize this controller
*/
module.exports = {
async find(params, populate){
return strapi.query('dish-category').find(params, ["dishes","dish.dish_options"]);
}
};
I am having trouble displaying nested relations with multiple values, I have tried looking up solutions online, I came across this thread https://forum.strapi.io/t/simple-nested-array-issue/1045/4 but the solution doesn't work for me and it seems like the link to the example is no longer available.

JSON to HTML page for name and image as output

Can somebody help me to get the Name with his associated image from the following json.
Code should be in HTML or JS, as I am a backend developer and not able to figure out this.
The JSON:
{
"boardMembers": [
{
"id": "18706279",
"name": "Monique R Herena",
"thumbnail": null,
"title": "Chief Colleague Experience Officer",
"slug": "18706279-monique-r-herena",
"webVisibility": true
},
{
"id": "19676689",
"name": "Elizabeth Rutledge",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iABmk_sWUnY4/v3/80x80.png",
"alt": null
},
"title": "Chief Marketing Officer",
"slug": "19676689-elizabeth-rutledge",
"webVisibility": true
},
{
"id": "18784925",
"name": "Tangela Richter",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iKYkW0FlMRW4/v3/80x80.png",
"alt": null
},
"title": "Chief Governance Ofcr/Secy",
"slug": "18784925-tangela-richter",
"webVisibility": true
},
{
"id": "15024090",
"name": "Laureen E Seeger",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iiw0z.pdTRbE/v1/80x80.jpg",
"alt": "LAUREEN E SEEGER"
},
"title": "Chief Legal Officer",
"slug": "15024090-laureen-e-seeger",
"webVisibility": true
},
{
"id": "21336581",
"name": "Jennifer Skyler",
"thumbnail": null,
"title": "Chief Corporate Affairs Officer",
"slug": "21336581-jennifer-skyler",
"webVisibility": true
},
{
"id": "19676686",
"name": "Raymond Joabar",
"thumbnail": null,
"title": "Pres:Global Risk/CRO",
"slug": "19676686-raymond-joabar",
"webVisibility": true
},
{
"id": "15365626",
"name": "Douglas E Buckminster",
"thumbnail": null,
"title": "Group Pres:Global Consumer",
"slug": "15365626-douglas-e-buckminster",
"webVisibility": true
},
{
"id": "16654781",
"name": "Anna Marrs",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iNFzMiuYiRGY/v3/80x80.png",
"alt": null
},
"title": "Pres:Global Commercial Svcs",
"slug": "16654781-anna-marrs",
"webVisibility": true
},
{
"id": "16804630",
"name": "Denise Pickett",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iReOY_ZB0dOI/v2/80x80.png",
"alt": null
},
"title": "Pres:Global Services Group",
"slug": "16804630-denise-pickett",
"webVisibility": true
},
{
"id": "6832356",
"name": "Anre D Williams",
"thumbnail": {
"url": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iJ5kSc7LL.3Y/v2/80x80.png",
"alt": null
},
"title": "Pres:Global Merchant & Network Svcs",
"slug": "6832356-anre-d-williams",
"webVisibility": true
},
{
"id": "3221610",
"name": "Jeffrey C Campbell \"Jeff\"",
"thumbnail": {
"url": " ",
"alt": "35000014"
},
"title": "Exec VP/CFO",
"slug": "3221610-jeffrey-c-campbell",
"webVisibility": true
},
{
"id": "16733751",
"name": "Marc D Gordon",
"thumbnail": {
"url": " ",
"alt": null
},
"title": "Exec VP/CIO",
"slug": "16733751-marc-d-gordon",
"webVisibility": true
},
{
"id": "21531045",
"name": "Jessica Lieberman Quinn",
"thumbnail": null,
"title": "Exec VP/Controller",
"slug": "21531045-jessica-lieberman-quinn",
"webVisibility": true
},
{
"id": "19863566",
"name": "Alan P Gallo",
"thumbnail": {
"url": " ",
"alt": null
},
"title": "Exec VP:Internal Audit/Chief Audit Exec",
"slug": "19863566-alan-p-gallo",
"webVisibility": true
},
{
"id": "16310906",
"name": "Vivian Zhou",
"thumbnail": null,
"title": "Senior VP/Head:Investor Relations",
"slug": "16310906-vivian-zhou",
"webVisibility": false
}
],
"totalExecutives": 17
}

Welcome to the front-end world! First, HTML IS NOT a programming language, it is a Markup Language. You need to use JavaScript to do that, not HTML.
You need to parse the string into an object and iterate each "member" on the object list to get this Name and Photo. I wrote a JavaScript version and a PHP version for comparison.
If you're using JavaScript:
Parse the string into JavaScript object ("JSON.parse" function)
Iterate items in "boardMembers" list
Get those values
CODE:
//Your string
let stringToParse = '<your string here>'
//Converting your string to object
let convertedToObject = JSON.parse(stringToParse);
//Getting the boardMembers list from your parsed object
let listBoardMembers = convertedToObject.boardMembers;
//Creating Elements on HTML (creating a Paragraph with the received data and a container for the list of members). *Notice: I've created a "DIV" (container) with a unique ID ("listMembers"). This is important because when I start to iterate the members I will add them inside the container, and for that, I need to reference it using an ID.*
document.body.innerHTML = `<p> Received String: ${stringToParse}</p>`;
document.body.innerHTML += `<div id="listMembers"></div>`;
//Iterating the list of boardMembers using this length;
for (let i = 0; i < listBoardMembers.length; i++) {
let member = listOfMembers[i];
let memberName = member.name;
let memberImageURL = '';
// Verify if the user has thumbnail
if (member.thumbnail !== null){
memberImageURL = member.thumbnail.url;
}
//Adding this member to the member's container, using the container ID, that we created previously.
document.getElementById('listMembers').innerHTML += `
<div style="display: flex;">
<img src="${memberImageURL}">
<h1>${memberName}</h1>
</div>
`;
}
Best regards,

angular-schema-form array length

I have this schema:
{
"type": "object",
"title": "Comment",
"required": [
"comments"
],
"properties": {
"comments": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"title": "Name",
"type": "string"
},
"email": {
"title": "Email",
"type": "string",
"pattern": "^\\S+#\\S+$",
"description": "Email will be used for evil."
},
"spam": {
"title": "Spam",
"type": "boolean",
"default": true
},
"comment": {
"title": "Comment",
"type": "string",
"maxLength": 20,
"validationMessage": "Don't be greedy!"
}
},
"required": [
"name",
"comment"
]
}
}
}
}
This is an array of comments. I can add and remove comments.
How can I render 2 items of the array always by default ?
I've tried with maxItems and minItems but those parameters don't render items.

There are two ways to do it currently.
First is to set them in the default model so it looks something like:
$scope.model = {
"comments": [{},{}]
}
The second would be to use onChange on the array:
"onChange": function(val) { if(val.length < 2) val.push({}); }
The difference between the two being that the onChange will not allow it to drop below the minimum length you set while the first option is just for the initial default.

How to get "title" from AJV error?

I've got a JSON Schema that looks like this:
{
"required": [
"instructions"
],
"properties": {
"instructions": {
"title": "Instructions",
"minItems": 3,
"type": "array",
"items": {
"required": [
"typeId",
"teamId",
"disciplineId"
],
"properties": {
"typeId": {
"minimum": 1,
"title": "Appointment Type",
"type": "integer"
},
"teamId": {
"minimum": 1,
"title": "Team",
"type": "integer"
},
"disciplineId": {
"minimum": 1,
"title": "Discipline",
"type": "integer"
},
"prefClinicianId": {
"title": "Pref. Clinician",
"anyOf": [
{
"type": "null"
},
{
"minimum": 1,
"type": "integer"
}
]
},
"prefTime": {
"title": "Pref. Time",
"anyOf": [
{
"type": "null"
},
{
"type": "integer"
}
]
},
"childRequired": {
"title": "Child Req'd",
"type": "boolean"
}
},
"type": "object"
}
}
},
"type": "object"
}
As you can see, I've added titles to all the properties. However, the error object I get back looks like:
[
{
"keyword": "minItems",
"dataPath": ".instructions",
"schemaPath": "#/properties/instructions/minItems",
"params": {
"limit": 3
},
"message": "should NOT have less than 3 items"
},
{
"keyword": "type",
"dataPath": ".instructions[0].typeId",
"schemaPath": "#/properties/instructions/items/properties/typeId/type",
"params": {
"type": "integer"
},
"message": "should be integer"
},
{
"keyword": "type",
"dataPath": ".instructions[0].teamId",
"schemaPath": "#/properties/instructions/items/properties/teamId/type",
"params": {
"type": "integer"
},
"message": "should be integer"
},
{
"keyword": "type",
"dataPath": ".instructions[0].disciplineId",
"schemaPath": "#/properties/instructions/items/properties/disciplineId/type",
"params": {
"type": "integer"
},
"message": "should be integer"
}
]
As you can see, the title is not in there. How can I get the titles with the errors?
Please note that this question is specific to AJV.

When you create your AJV object set the verbose option to true.
This will add a parentSchema property to the ajv error with the original schema. It will also add a schema property that contains the specific schema attribute that caused the validation failure.
Here's an example:
var ajv = new Ajv({
$data: true,
verbose: true
});
let schema = {
title: 'object title',
type: 'object',
properties: {
str: {
title: "A string property",
type: "string"
}
}
};
let data = {
str: 3
};
ajv.validate(schema, data)
console.log('ERRORS: ', this.ajv.errors)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/5.3.0/ajv.bundle.js"></script>

Strongloop property from relation in parent

I don't know if I'm just blind or something but how can I do the following:
I have a User model with a hasOne relation to a UserData model. I only want one property of UserData directly in the results of User.
The relation in User looks like this:
"relations": {
"userData": {
"type": "hasOne",
"model": "UserData"
}
}
And the default scope in User:
"scope": {
"include": "userData"
}
So the result for one User is:
[
{
"id": 5,
"email": "example#example.com",
"name": "Example",
"userData": {
"id": 5,
"birthdate": "1971-09-06T00:00:00.000Z"
}
}
]
But what I want is this:
[
{
"id": 5,
"email": "example#example.com",
"name": "Example",
"birthdate": "1971-09-06T00:00:00.000Z"
}
]
How can I achive this?
Edit:
The two model definitions:
ChiliUser:
{
"name": "ChiliUser",
"base": "ChiliUserData",
"idInjection": true,
"options": {
"validateUpsert": true,
"mysql": {
"table": "person"
}
},
"properties": {
"id": {
"type": "number"
},
"email": {
"type": "string"
},
"password": {
"type": "string"
},
"vorname": {
"type": "string"
},
"name": {
"type": "string"
},
"spitzname": {
"type": "string"
},
"strasse": {
"type": "string"
},
"plz": {
"type": "number"
},
"ort": {
"type": "string"
},
"geolat": {
"type": "string"
},
"geolng": {
"type": "string"
}
},
"validations": [],
"relations": {},
"acls": [],
"methods": []
}
ChiliUserData:
{
"name": "ChiliUserData",
"base": "PersistedModel",
"idInjection": true,
"options": {
"validateUpsert": true,
"mysql": {
"table": "person_data"
}
},
"properties": {
"id": {
"type": "number"
},
"person_id": {
"type": "number"
},
"birthdate": {
"type": "date"
}
},
"validations": [],
"relations": {},
"acls": [],
"methods": []
}

Are you using the built-in User model? If you are, you can simply extend it with your UserData model using base: "User", and the underlying schema will be as you desire:
{
"name": "UserData",
"base": "User",
"properties": {}
...
}
But this setup would mean you'd use UserData over User in your code. Since the built-in User model gets in the way, I'd recommend a different word like Person or Customer, in which case it would look like:
{
"name": "Person",
"base": "User",
"properties": {
...extra user data properties only...
}
...
}
This way, only Person will have all the extra "user data" fields on it, but will also include all the fields/methods defined for User inside node_modules/loopback/common/models/User.json. If you're using MySQL, the Person table will be created with the combination of fields from both User and Person.