Strapi repeatable Component Not Sending Image Obj with Populate=* - html

This is a repeatable component of strapi:
Api call:
{
"id": 1,
"attributes": {
../other fields
"imgs": [
{
"id": 37,
"title": "KeyNote Lecture",
"subtitle": "Felicitation in Chennai, Molaris 2022"
},
../Same Objects
],
}
}
See API call getting the only title, subtile, id only. but the image not getting.
Please, anyone, help.

this is because populate=* gives only first level of relations, and image inside component is a relation of second level:
Option one (easiest) use yarn add strapi-plugin-populate-deep
/api/course-director?populate=deep
Option two use qs:
const str = qs.stringify(
{
populate: { imgs: { populate: ["image"] } }
},
{ encodeValuesOnly: true }
);
populate[imgs][populate][0]=image

Related

getting data from an array of objects inside array JSON data

I have trouble taking data from an API set. The body if viewed in Postman / Insomnia is as follows
{
"responses": {
"log": [
{
"id": 123,
"date": "2022-01-01T01:12:12.000Z",
"type": "online",
"details": [{
"detailId": "123-1",
"note": "success",
}]
},
{
"id": 124,
"date": "2022-01-01T01:12:12.000Z",
"type": "offline",
"details": [{
"detailId": "123-2",
"note": "failed",
}]
}
]
}
}
I want to take all data from log, as well from details. I used
adapt(item: any) {
return {
id: item.id,
date: item.date,
details: {
detailId: item.details.detailId,
note: item.details.note,
},
};
}
this returns id and date just fine. I also have a query to filter it based on type (online or offline), basically adding &type= into the API. It works for the online, but it returns detailId is undefined for offline (I used the same body, adapter and API minus the query for both data)
details is an array of object if you want to adapt it you need to do it iteratively.
adapt(item: any) {
const details = item.details.map(d => {detailId: d.id, note: d.note, …});
return {
id: item.id,
date: item.date,
details
};
}
Found the answer, apparently to make sure that I can get every value is to add ? after the [0], so it should be
details: {
detailId: item.details[0]?.detailId,
note: item.details[0]?.note,
},

Map JSON in Angular 9

I designed an app using Angular which is linked to a DB using a backEnd made with ASP.NET
My problem is that my JSON in the Front is a little different that the JSON in the backEnd.
And I need help on how to map the frontEnd JSON to send it to the backEnd.
psd: i created all the interfaces on the frontend, and I'm usign formControls and FormArrays to store the data in the front, the problem is that de JSON are a bit different.
I cannot change the JSON on the backEnd because is linked with the DB and it has PK and FK so that's the reasson because it's a bit different.
I was thinking about doing something like this.myform.value and map to the other interface, but i have no idea on how to do that because i have array of arrays...
Maybe a for loop?
Here is my frontEnd JSON:
{
"non-array fields....................." : "bla bla",
"arraySustancias": [
{
"sustanciaActiva": "hello",
"contenido": "2",
"suministro": ["hello2","hello3"],
"unidades": "3"
}
],
"arrayProcedimientos": [
{
"procedimiento": "",
"fechaInicioProcedimiento": "",
"fechaFinProcedimiento": "",
"notasProcedimiento": "",
"arraySubprocedimientos": [
{
"subprocedimiento": "",
"fechaInicioSubProcedimiento": "",
"fechaFinSubProcedimiento": "",
"notasSubProcedimiento": "",
"exp": ""
}
]
}
]
}
And here is my backEnd JSON:
{
"non-array fields.....................": "bla bla",
"registros_arraySustancias": [
{
"registros_arraySustancias_suministro": [
{
"registros_arraySustancias_id": "",
"id": "",
"value": [
"ABBOTT LABORATORIES",
"ADAMA Agan Ltd."
]
}
],
"registros_id": "",
"id": "",
"sustanciaActiva": "hola",
"contenido": 2,
"unidades": 3
}
],
"registros_arrayProcedimientos": [
{
"registros_id": "",
"id": "",
"procedimiento": "text",
"fechaInicioProcedimiento": "18/06/2020",
"fechaFinProcedimiento": "18/06/2020",
"notasProcedimiento": "notes",
"registros_arrayProcedimientos_arraySubprocedimientos": [
{
"registros_arrayProcedimientos_id": "",
"id": "",
"subprocedimiento": "text",
"fechaInicioSubProcedimiento": "19/06/2020",
"fechaFinSubProcedimiento": "19/06/2020",
"notasSubProcedimiento": "notes"
}
]
}
]
}
Thanks for your help :)
In that case I think you have to work a little bit with angular forms so that data from frontend should be from the same structure. FormGroups and FormArayys will help you alot.
Try looking at this article as well.
http://www.howilearnt.com/web-development/angular/make-a-json-object-with-angular-forms/
You simply create an object from your original object. There is no magic or automatic way to do that. Example:
interface OriginalData {
foo: string;
baz: {
test: number[]
};
}
interface MyData {
foobar: string;
bazTest: number[];
}
function getData(): Observable<OriginalData> {
return this.http.get<OriginalData>(url);
}
function convertData(original: OriginalData): MyData {
const res: MyData = {
foobar: original.foo,
bazTest: original.baz.test
};
return res;
}
// somewhere in your code
getData().subscribe(
v => sendData(convertData(v))
);
I'm using the Angular http client here, because you added the tag "angular". It will give you an object of the type you specified.
That was what I was looking for:
mapeado = {
pais: "",
registros_arraySustancias: [{
unidades: "",
contenido: 2,
sustanciaActiva: "",
registros_arraySustancias_suministro: [{value: [""]}]
}
]
}
Thanks a lot for your help

Access Array inside an object (json)

I have this json file and I want to access the array that is inside this object:
best-sellers": [
{
"title": "Chuteira Nike HyperVenomX Proximo II Society",
"price": 499.90,
"installments": {
"number": 10,
"value": 49.90
},
"high-top": true,
"category": "society",
"image": ""
},
{
"title": "Chuteira Nike HyperVenom Phantom III Cano Alto Campo",
"price": 899.90,
"installments": {
"number": 10,
"value": 89.90
},
"high-top": true,
"category": "campo",
"image": ""
}
}
]
This is the code on my component:
ngOnInit(): void {
this.service
.lista()
.subscribe(chuteiras =>{
this.chuteiras = chuteiras;
})
}
and my template looks like this:
<div *ngFor="let chuteira of chuteiras.best-sellers">
But angular is not reconigzing it the `best-sellers", here's the error that I'm getting:
Cannot read property 'best' of undefined
Just use bracket notation,
<div *ngFor="let chuteira of chuteiras["best-sellers"]">
well,that's one way of doing it but angular 6 came with a simple solution. when i was faced with this problem i myself resolved to this solution but it didn't work for me so after searching and making my own touches i ended up with this solution.
1.create the function to receive the JSON data in my case i used a web API
getTrending() {
return this.http.get(https://api.themoviedb.org/3/trending/all/day?api_key=${this.api_key});
}
2.call the function in my case i used a service, so after import it to my component i simply added this
showPopular(): void {
this.api.getTrending().subscribe((data: Array<object>) => {
this.list = data['results'];
console.log(this.list);
});
}
as you can see the data variable only accessed the information i required.

Ember.js / nested json / cannot get data displayed

making first attempt to master Ember.js atm. I'm trying to make a simple CMS, but for some reason I have a problem with getting any data from json displayed. I've already switched from Fixture to RESTAdapter, but I am still stuck with
Error: assertion failed: Your server returned a hash with the key timestamp but you have no mapping for it.
Here's my js code:
App.Store = DS.Store.extend(
{
revision:12,
adapter: 'DS.RESTAdapter'
}
);
App.Menucategory = DS.Model.extend({
timestamp: DS.attr('number'),
status: DS.attr('string')
});
App.MenucategoryRoute = Ember.Route.extend({
model: function() {
return App.Menucategory.find();
}
});
DS.RESTAdapter.reopen({
url: <my url>
});
DS.RESTAdapter.configure("plurals", {
menucategory: "menucategory"
});
Trying to access it with:
<script type="text/x-handlebars" id="menucategory">
{{#each model}}
{{data}}
{{/each}}
</script>
My json structure:
{
"timestamp": 1366106783,
"status": "OK",
"data": [
{
"name": "starters",
"id": 1
},
{
"name": "main dishes",
"id": 2
}]}
Thank you in advance for any help you can provide.
By default the RESTAdapter expects your API to be in a specific format, which your API doesn't conform to, if you can modify your API, you need to get it to return in this format, otherwise you'll need to customize the adapter.
Expected Format (based on your JSON):
{
"menucategory": [
{
"name": "starters",
"id": 1
},
{
"name": "main dishes",
"id": 2
}
],
"meta": {
"timestamp": 1366106783,
"status": "OK",
}
}

Loading TreeStore with JSON that has different children fields

I am having a JSON data like below.
{
"divisions": [{
"name": "division1",
"id": "div1",
"subdivisions": [{
"name": "Sub1Div1",
"id": "div1sub1",
"schemes": [{
"name": "Scheme1",
"id": "scheme1"
}, {
"name": "Scheme2",
"id": "scheme2"
}]
}, {
"name": "Sub2Div1",
"id": "div1sub2",
"schemes": [{
"name": "Scheme3",
"id": "scheme3"
}]
}
]
}]
}
I want to read this into a TreeStore, but cannot change the subfields ( divisions, subdivisions, schemes ) to be the same (eg, children).
How can achieve I this?
When nested JSON is loaded into a TreeStore, essentially the children nodes are loaded through a recursive calls between TreeStore.fillNode() method and NodeInterface.appendChild().
The actual retrieval of each node's children field is done within TreeStore.onNodeAdded() on this line:
dataRoot = reader.getRoot(data);
The getRoot() of the reader is dynamically created in the reader's buildExtractors() method, which is what you'll need to override in order to deal with varying children fields within nested JSON. Here is how it's done:
Ext.define('MyVariJsonReader', {
extend: 'Ext.data.reader.Json',
alias : 'reader.varijson',
buildExtractors : function()
{
var me = this;
me.callParent(arguments);
me.getRoot = function ( aObj ) {
// Special cases
switch( aObj.name )
{
case 'Bill': return aObj[ 'children' ];
case 'Norman': return aObj[ 'sons' ];
}
// Default root is `people`
return aObj[ 'people' ];
};
}
});
This will be able to interpret such JSON:
{
"people":[
{
"name":"Bill",
"expanded":true,
"children":[
{
"name":"Kate",
"leaf":true
},
{
"name":"John",
"leaf":true
}
]
},
{
"name":"Norman",
"expanded":true,
"sons":[
{
"name":"Mike",
"leaf":true
},
{
"name":"Harry",
"leaf":true
}
]
}
]
}
See this JsFiddle for fully working code.