I'm building up an array of JSON objects using jsonfn and rendering them on the JavaScript window object.
[#assign json = []]
[#list articles as article]
[#assign json += [jsonfn.from(article).add("categories", "title", "#name").expand("categories").inline().print()]]
[/#list]
<script>
window.articles = [${json?join(",")}];
</script>
While effective, the expanded categories field (expand("categories")) sometimes includes null values.
{
"categories": [
{
"displayName": "Example Category",
"#name": "example-category"
},
null
],
"title": "Example Article",
"#name": "example-article"
}
This requires me to add an instanceof Object check when filtering in JavaScript so that I don't get a null error.
export const filterArticles = (selectedCategory, articles) => {
return articles.filter((article) => {
return article.categories.find((category) =>
category instanceof Object && category['#name'] === selectedCategory
);
});
};
Why does jsonfn.expand sometimes output null values? Why isn't there a null safety check to avoid including them in the rendered output?
See JSONFN-5 ticket. Should be working without printing nulls as of version 1.0.9(-SNAPSHOT). Alternatively, pull the latest code from github and build it yourself.
Related
I have this store:
export const flights = writable<APIResponse>([])
And I want to add elements at the end of that array. I tried his:
flights.set({ ...flights, input })
But that doesn't add, it overwrites the existing elements, leaving only the one in input. How can I do that?
I am in a .ts. I'm taking over someone else's job who left the company and I'm new to all of this, I still don't have a clear idea of this mix of languages/frameworks.
When I print flights appears empty.
console.warn(flights store: + JSON.stringify(flights))
{}
Some advances. It seems it was not empty. I wasn't printing it the correct way. I can see the elements added if I add them like this:
unconfirmed_flights.update((data) => {
data.push(input))
return data
})
and print the content like this:
unconfirmed_flights .update((data) => {
console.warn(JSON.stringify(data))
return data
})
That prints something like: [{json_object}, {json_object}].
The thing is that in fact I have two stores:
export const flights = writable<APIResponse>([])
export const unconfirmed_flights = writable<APIResponse>([])
The code receives several items that are added to unconfirmed_flights correctly. Then a dialog opens and if the user presses accept I need to copy the items in unconfirmed_flights to flights. I do that like this. First I create an index (id) with the empty array:
flights.update((data) => {
data[id] = []
return data
})
Then I add all the elements in unconfirmed_flights:
unconfirmed_flights.update((uplan) => {
flights.update((data) => {
data[id].push(uplan)
return data
})
return uplan
})
But the result, instead of
{"id": [{json_object}, {json_object}]}
is
{"id": [[{json_object}, {json_object}]]}
With that nested array. However, if I don't do the step of data[id] = [], I get a "Uncaught (in promise) TypeError: data.push is not a function", that I read is because the index does not exist. How can I avoid that nested array?
const flights = writable([])
If you want to add a value to a store from a .js file use .update() where the current value is available
flights.update(value => [...value, newValue])
Inside a .svelte file the store variable can be prefixed with $ to access the value and the new value could be added like this
$flights = [...$flights, newValue]
After three days of unsuccessful attemps to add the content exactly as I needed, I found the help of a JS expert. There it goes the solution.
Having
flights = {"1": { "name": "name1" } }
and
unconfirmed_flights = [ {"2": { "name": "name2" } }, {"3": { "name": "name3" } } ]
The goal was to add the unconfirmed_flights to flights:
flights = {"1": { "name": "name1" },
"2": { "name": "name2" },
"3": { "name": "name3" } }
And that was done like this:
flights.update((plan) => {
const uplan = get(unconfirmed_flights)
uplan.forEach((uplanItem) => {
plan = { ...plan, ...uplanItem }
})
return plan
})
being
export type APIResponse = { [key: string]: any }
export const flights = writable<APIResponse>([])
export const unconfirmed_flights = writable<APIResponse[]>([])
My understanding is that using serializeIds: 'always' will give me this data, but it does not.
Here's what I'm expecting:
{
id="1"
title="some title"
customerId="2"
}
Instead the output I'm receiving is:
{
id="1"
title="some title"
}
My code looks something like this:
import {
Server,
Serializer,
Model,
belongsTo,
hasMany,
Factory
} from "miragejs";
import faker from "faker";
const ApplicationSerializer = Serializer.extend({
// don't want a root prop
root: false,
// true required to have root:false
embed: true,
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always"
});
export function makeServer() {
let server = newServer({
models: {
invoice: Model.extend({
customer: belongsTo()
}),
customer: Model.extend({
invoices: hasMany()
})
},
factories: {
invoice: Factory.extend({
title(i) {
return `Invoice ${i}`;
},
afterCreate(invoice, server) {
if (!invoice.customer) {
invoice.update({
customer: server.create("customer")
});
}
}
}),
customer: Factory.extend({
name() {
let fullName = () =>
`${faker.name.firstName()} ${faker.name.lastName()}`;
return fullName;
}
})
},
seeds(server) {
server.createList("invoice", 10);
},
serializers: {
application: ApplicationSerializer,
invoice: ApplicationSerializer.extend({
include: ["customer"]
})
},
routes() {
this.namespace = "api";
this.get("/auth");
}
});
}
Changing the config to root: true, embed: false, provides the correct output in the invoice models, but adds the root and sideloads the customer, which I don't want.
You've run into some strange behavior with how how serializeIds interacts with embed.
First, it's confusing why you need to set embed: true when you're just trying to disable the root. The reason is because embed defaults to false, so if you remove the root and try to include related resources, Mirage doesn't know where to put them. This is a confusing mix of options and Mirage should really have different "modes" that take this into account.
Second, it seems that when embed is true, Mirage basically ignores the serializeIds option, since it thinks your resources will always be embedded. (The idea here is that a foreign key is used to fetch related resources separately, but when they're embedded they always come over together.) This is also confusing and doesn't need to be the case. I've opened a tracking issue in Mirage to help address these points.
As for you today, the best way to solve this is to leave root to true and embed false, which are both the defaults, so that serializeIds works properly, and then just write your own serialize() function to remove the key for you:
const ApplicationSerializer = Serializer.extend({
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always",
serialize(resource, request) {
let json = Serializer.prototype.serialize.apply(this, arguments);
let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)
return json[root];
}
});
You should be able to test this out on both /invoices and /invoices/1.
Check out this REPL example and try making a request to each URL.
Here's the config from the example:
import {
Server,
Serializer,
Model,
belongsTo,
hasMany,
Factory,
} from "miragejs";
import faker from "faker";
const ApplicationSerializer = Serializer.extend({
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always",
serialize(resource, request) {
let json = Serializer.prototype.serialize.apply(this, arguments);
let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)
return json[root];
}
});
export default new Server({
models: {
invoice: Model.extend({
customer: belongsTo(),
}),
customer: Model.extend({
invoices: hasMany(),
}),
},
factories: {
invoice: Factory.extend({
title(i) {
return "Invoice " + i;
},
afterCreate(invoice, server) {
if (!invoice.customer) {
invoice.update({
customer: server.create("customer"),
});
}
},
}),
customer: Factory.extend({
name() {
return faker.name.firstName() + " " + faker.name.lastName();
},
}),
},
seeds(server) {
server.createList("invoice", 10);
},
serializers: {
application: ApplicationSerializer,
},
routes() {
this.resource("invoice");
},
});
Hopefully that clears things up + sorry for the confusing APIs!
I'm fairly new to meteor and I'm still trying to find my way around with filtering collections. Here is my problem, I have a collection defined as follows;
parent_id: {
label: 'Parent ID',
type: String,
},
ar_session_id: {
label: 'Session ID',
type: String,
},
I have inserted some documents and here is one;
{
"_id" : "oQdtbBtKXHzdxWvzn",
"parent_id" : "dJkbDBXut5WzwkaFN",
"ar_session_id" : "dJkbDBXut5WzwkaFNuz77MFgcuGyvgokip",
"question" : "Do you have blah blah...?",
"answer" : "no",
"createdAt" : 1564563509127
}
I am able to filter using parent_id but I can't filter using ar_session_id
var parent_id = "dJkbDBXut5WzwkaFN";
var ar_session_id = "dJkbDBXut5WzwkaFNuz77MFgcuGyvgokip";
qry1 = AssessmentResponse.find({parent_id: parent_id}).fetch();
qry2 = AssessmentResponse.find({ar_session_id: ar_session_id}).fetch();
qry2 returns an empty set. What is it that I am missing?
The only reason I could think of would be if you are not publishing ar_session_id in the client.
For instance if you had something like this:
Meteor.publish("AssessmentResponse", function () {
return AssessmentResponse.find({}, { fields: { ar_session_id: 0 } });
});
Otherwise there is no reason the filtering would be empty, assuming you don't have any typo.
In my Meteor app, I have a simple array field called relatedSentences. It is defined using SimpleSchema
relatedSentences: {
type: [String],
label: "Related Sentence",
optional: false,
defaultValue: []
},
It's data can be seen in the Mongo console:
"_id" : "ei96FFfFdmhPXxRWb",
"sentence" : "the newest one",
"relatedSentences" : [
"Ls6EyBkbcotcyfLyw",
"6HKQroCjZhG9YCuBt"
],
"createdAt" : ISODate("2015-10-25T11:21:25.338Z"),
"updatedAt" : ISODate("2015-10-25T11:41:39.691Z")
But when I try to access this field using this, it is returned as a raw string.
Template.showSentence.helpers({
translations: function() {
console.log("related: " + this.relatedSentences);
Meteor.subscribe('sentences', function() {
var relatedSentences = Sentences.find({_id: {$in: this.relatedSentences} }).fetch();
console.log("rel count" + relatedSentences.length);
return relatedSentences;
});
}
});
In the console I get an error. See the return value from the this.relatedSentences. It is the contents of the array as a string, with a comma interpolated.
related: Ls6EyBkbcotcyfLyw,6HKQroCjZhG9YCuBt
selector.js:595 Uncaught Error: $in needs an array
Not sure what is going on here.
Some Progress
I have made some progress, but not yet at a solution. By adding blackbox: true to the SimpleSchema definition, what looks like an array is now returned... but alas it is still failing. See below.
relatedSentences: {
type: [String],
label: "Related Sentence",
optional: false,
blackbox: true,
defaultValue: []
},
Now I get the results below in the console. The values are now being returned as a quoted array, which is what I expected. But the $in is still not seeing it as an array.
["Ls6EyBkbcotcyfLyw", "6HKQroCjZhG9YCuBt"]
selector.js:595 Uncaught Error: $in needs an array
How did the data get populated
In answer to #Kyll - this is how the data was originally populated. I am using AutoForm,
{{> afQuickField name='relatedSentences.0' value=this._id type="hidden"}}
but then adding the array data via a hook.
AutoForm.addHooks('translateForm', {
onSuccess: function (operation, result, template) {
Meteor.subscribe('sentences', function() {
var translatedSentence = Sentences.findOne(result);
var originalSentenceId = translatedSentence.relatedSentences[0]
Sentences.update(
{ _id: originalSentenceId},
{ $push: { relatedSentences: result}
});
Router.go('showSentence',{ _id: originalSentenceId } );
});
}
});
The problem here is the scope of this. You are referring to it inside the subscribe function, where this has a different context. Set a varibale to this in the context where it works, then use that variable instead:
Template.showSentence.helpers({
translations: function() {
console.log("related: " + this.relatedSentences);
var this_related_sentences = this.relatedSentences;
Meteor.subscribe('sentences', function() {
var relatedSentences = Sentences.find({_id: {$in: this_related_sentences} }).fetch();
console.log("rel count" + relatedSentences.length);
return relatedSentences;
});
}
});
I have the following:
require([
"dojo/dom",
"dojo/on",
"dojo/store/Observable",
"dojo/store/JsonRest",
"dojo/store/Memory",
"dgrid/OnDemandGrid"
], function (dom, on, Observable, JsonRest, Memory, OnDemandGrid) {
var store = new JsonRest({
target: 'client/list',
idProperty: 'id'
});
var grid = new OnDemandGrid({
columns: {
"id": "ID",
"number": "Name",
"description": "Description"
},
sort: "lastName",
store: store
}, "grid");
});
client/list is a rest url returning a json object {data:[...]}, but the content of the list never shows up :/
I think the problem is caused by the async data loading, because with a json hard coded object the content show up
EDIT :
I've succeeded in achieving this by using a dojo/request, but the JsonRest shouldn't normally act the same way ? Can someone point me to the right direction ?
require([
'dojo/dom',
'dojo/on',
'dojo/store/Memory',
'dojo/request',
'dgrid/OnDemandGrid'
], function (dom, on, Memory, request, OnDemandGrid) {
request('client/list', {
handleAs: 'json'
}).then(function (response) {
// Once the response is received, build an in-memory store with the data
var store = new Memory({ data: response });
// Create an instance of OnDemandGrid referencing the store
var grid = new OnDemandGrid({
store: store,
sort: 'id', // Initialize sort on id, ascending
columns: {
'id': 'ID',
'number': 'Name',
'description': 'Description'
}
}, 'grid');
console.log(store);
on(dom.byId('queryForm'), 'input', function (event) {
event.preventDefault();
grid.set('query', {
// Pass a RegExp to Memory's SimpleQueryEngine
// Note: this code does not go out of its way to escape
// characters that have special meaning in RegExps
description: new RegExp(this.elements.last.value, 'i')
});
});
on(dom.byId('queryForm'), 'reset', function () {
// Reset the query when the form is reset
grid.set('query', {});
});
});
});
Ok problem found :/
My "client/list" url was returning a json object like this:
{data: [{id:"1", label: "test"}, {id:"2", label: "test"}]}
Turns out that the JsonRest object is already encapsulating data in a data node, so by returning a json like this:
{[{id:"1", label: "test"}, {id:"2", label: "test"}]}
everything worked fine :)