I am using semantic ui search module, the content will be a remote JSON file, can make it work but no matter what i typed whether its found or not, i will show up the list from the JSON file.
script
$('.ui.search')
.search({
apiSettings: {
url: 'http://localhost/api/materialMaster.json'
},
fields: {
results : 'data',
title : 'matcode'
},
minCharacters : 2
})
;
JSON file format is
{"data":[{"matcode":"0A66244S1"},{"matcode":"200GD0S100150CM"}]}
See if this can help. I had this same problem and I solved using this instructions.
https://stackoverflow.com/a/32937262/5381965
Related
I'm trying to query for all YAML files in a subfolder of my data folder. I'm using gatsby-transformer-yaml to parse the YAML data. My filetree looks something like this:
content/
posts/
book1.md
book2.md
src/
data/
books/
quotes1.yaml
quotes2.yaml
templates/
booknote.tsx
According to the documentation, I should be able to make a query called allBooksYaml which would return all of the quotes in quote1.yaml and quote2.yaml. However, when I look at the GraphiQL playground, the only queries I can make are allQuote1Yaml and allQuote2Yaml. (1) Is this a bug? Or is something wrong with my setup?
The reason why I want to do this is so that I can filter the result of allBooksYaml with the title of the book and display the correct quotes for each page generated with the booknote.tsx template. If I don't do this, I think I would have to make an individual page/GraphQL query manually for each book note post I want to create. (2) Is there a better way to link data in a YAML file and the Markdown/Page component?
Thanks in advance!
According to the plugin's documentation, given:
module.exports = {
plugins: [
`gatsby-transformer-yaml`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/data/`,
},
},
],
}
Where the source folder ${__dirname}/src/data/ contains the .yaml files.
Having in mind also, that you can structure your folder to generate an array or a single object:
Array of Objects: Where each file represents a collection. (you probably want this one)
Single Object: Where each subfolder represents a collection; each file represents one “record”.
So, if your path is ./src/data/books you should be able to query for all books, but this will generate a specific node for all books (single object).
For the second question, I think the best optimal solution is to generate dynamically the pages using gatsby-node.js, querying all markdown books and there, send the title (or another unique field) to the template via context and filter there for each specific book, so your quotes will need to contain a field with an identifier that will match the book, mostly what you said but without the manual approach. Which, at the same time, is more or less a blog approach.
Further reference: https://www.gatsbyjs.com/docs/creating-and-modifying-pages/
You should be able to do just that by using the following config:
"gatsby-transformer-yaml",
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/src/data`,
},
},
"gatsby-transformer-yaml",
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/content`,
},
},
I am using Angular ng-file-upload (https://github.com/danialfarid/ng-file-upload) on the frontend to manage the file upload process.
Unfortunately, form contains a complex object with multiple files. Using the MultipartFormData (https://www.playframework.com/documentation/2.5.x/ScalaBodyParsers) on the server side I have successfully decomposed the uploaded content and can read it from the request.body.
Now, to my surprise, I do not have a simple Json Objects but rather a strangely formed datatype, described on the ng-file-upload website as:
(...) server implementations expecting nested data object keys in .key or [key] format.
Example: data: {rec: {name: 'N', pic: file}} sent as: rec[name] -> N, rec[pic] -> file
data: {rec: {name: 'N', pic: file}, objectKey: '.k'} sent as: rec.name -> N, rec.pic -> file
So far I have managed to bring all the data to a common MultipartFormData.Part type, using the DataPart and FilePart like this:
val opts = body.dataParts.map {
case (key, values) => DataPart(key, values.head)
}
val parts = opts ++ body.files
So I am now left with a quite unfortunate Iterable[Part]:
0 = {MultipartFormData$DataPart#86271} "DataPart(arabic[active],false)"
1 = {MultipartFormData$DataPart#86273} "DataPart(english[active],true)"
2 = {MultipartFormData$DataPart#86277} "DataPart(english[url],2132132132)"
...
7 = {MultipartFormData$FilePart#76473} "FilePart(english[image],fb_icon_325x325.png,Some(image/png),TemporaryFile(/tmp/playtemp5909927824995768544/multipartBody8348573128070542611asTemporaryFile))"
Each object name contains the key of it's Json structure and its according value. Now instead of key[level1][level2] I would like to parse it to objects, in my case:
case class PcBanner(english: PcBanners, arabic: PcBanners, kurdish: PcBanners)
case class PcBanners(active: Boolean, url: Option[String], image: Option[String])`
I hope you got the idea.
The question
I know I could try to parse the name strings trying to fit it to objects, but I believe I made a mistake someway in the middle.
Is there a way to parse this structure into the objects, using field names as a reference? Any build in Play functions or alike?
Thanks for help!
As I stated in the title my case was to send images. As you would expect, I am also presenting a preview and the files currently saved in the database.
Considering all pros and cons I have decided to send all the data in JSON format, both ways. Meaning that the images are encoded and sent along in JSON structure.
Despite the fact that above solution looks very convenient it actually creates new problems during the implementation.
You will quickly exceed the server's POST request size limit. For Play server the default 100kB is possible to be extended, but...
I have soon run into some data malformations as the image saved as huge String of bytes probably had some sending/parsing errors.
Not going deeper into this faulty solution I have used the #danial advice:
No have the file sent separately like this
{file: file, otherData: JSON.stringify(myData)}
My solution
If anyone would like to use similar approach to mine I present my answer.
On the front-end side I have decided used ng-file-upload library. Binding it to HTML component with ngf-select with ngf-drop which enables the component:
<div ngf-drop ngf-select
ng-model="image"
ngf-accept="'image/*'"
ngf-resize="{width: {{width}}, height: {{height}}, quality: 1.0, restoreExif: false}">
<img ng-show="!!image && !!image.$ngfName" ngf-src="image">
<img ng-show="(!image || !image.$ngfName)" ng-src="{{ imageUrl }}">
</div>
Inside the upload tag I put the image preview. This works flawlessly. If the image is not selected I use the image saved in the db.
The data and images do not share the model anymore. The upload function looks as follow:
return Upload.upload({
url: url,
data: {file: images, data: angular.toJson(data)}
}).then(function (resp) {
console.log(resp);
}, function (error) {
console.log(error);
});
Putting together all the above gave me the output data object:
{
"english":{
"active":true,
"url":"http://google.com"
},
"arabic":{
"active":true,
"url":"http://google.com"
},
"kurdish":{
"active":true,
"url":"http://google.com"
}
}
On the server side the JSON matches the prepared case class and is parsed with build-in Jackson parser, allowing for easy object manipulation. The image has to be manually selected:
val json = r.body.dataParts("data")
val jsValue = Json.parse(json.head)
val result = jsValue.validate(LocalizedBanner.dataModelFormat) // parse JSON
Extracting the files from body can be done with build in function .file:
val key = s"file[${lang.name}][${imageType.name}]"
body.file(key).map(mp => (mp.ref.file, imageType))
Enjoy!
I'm experiencing little trouble getting Orionjs working within Angular-Meteor especially with the collections.
I had my old mongodb declarations, for instance :
Gallery = new Mongo.Collection('gallery') and so one.
As the documentation told , I wrote
Gallery = new orion.collection('gallery') but what I get is
Error: Match error: Expected object, got undefined
at exports.check (packages/check/match.js:34:1)
at new orion.collection (packages/orionjs:collections/new.js:8:3)
at meteorInstall.shared.collections.js (shared/collections.js:1:11)
So I tried to start a project from scratch with this framework.
Fact is, it doesn't work neither with Iron Router nor Flow Router.
Can anyone hit me with any hint about it?
Thank you guys.
Ideally OrionJS expect a schema detail like the label for singular and plural names, navigation detail, table layout for displaying data and so on.Here's a typical company collection shown below:
Company = new orion.collection('company', {
singularName: orion.helpers.getTranslation('company.singularName'),
pluralName: orion.helpers.getTranslation('company.pluralName'),
title: orion.helpers.getTranslation('company.title'),
link: {
title: orion.helpers.getTranslation('company.title'),
parent: 'collections-abc'
},
tabular: {
columns: [
{ data: '_id', title: orion.helpers.getTranslation('company.schema.id') },
{ data: 'name', title: orion.helpers.getTranslation('company.schema.name') }
]
}
});
You can also pass a null JSON if you do not wish to show page directly. Usually it expects a JSON like the one shown above.
I've coded a small mobile application using Sencha Touch 2 framework. For the moment, I manage some articles from a database in localhost. I've written a database management using PHP CRUD methods contained here in ArticleService.php file. My 'read' fonction get back all the articles. But I want to have an other 'read' method to read for exemple a specific article according to its id or the last 5 articles, etc. But the store proxy (I think so) allows 1 methods for each main operation. So in my case, for 'read' operation I just have an only 'read' method.
Here's is my 'store' source code :
Ext.define("MyApp.store.ArticleStore", {
extend: "Ext.data.Store",
requires: ["MyApp.model.ArticleModel"],
config: {
model: "MyApp.model.ArticleModel",
proxy: {
type: "ajax",
api: {
create: "http://localhost/MobileApplication/MyApp/services/ArticleService.php?action=create",
read: "http://localhost/MobileApplication/MyApp/services/ArticleService.php?action=read",
update: "http://localhost/MobileApplication/MyApp/services/ArticleService.php?action=update",
destroy: "http://localhost/MobileApplication/MyApp/services/ArticleService.php?action=destroy"
},
extraParams: {
keyword: ""
},
reader: {
type: "json",
rootProperty: "articles",
totalProperty: "total"
}
},
autoLoad: true
}
});
Is there a possible way to have several methods for each main CRUD operation (for example 3 differents 'read' methods to manage my articles display) ? I'm really lost.
Thanks in advance for your help!
You don't need different methods for read. Once you load the store it will be in the memory and you will be able to find any record you want.
If you're store is too big to be loaded at once - take a look at remoteFilter property: http://docs.sencha.com/touch/2.1.1/#!/api/Ext.data.Store-cfg-remoteFilter This way filters you will set up (like id = 1 or parent_id = 2) will be passed to the server so it can return proper record set.
ExtJS Model fields have mapping option.
fields: [
{name: 'brandId', mapping:'brand.id', type: 'int'},
{name: 'brandName', mapping:'brand.name', type: 'string'},
The problem is: if the response from server does not contain some field(brand field in my example) and mapping from inner fields is defined, Ext Store silently fails to load any records.
Does anybody have problems with this? Is it some kind of a bug?
UPDATE
To make it clear: suppose I have ten fields in my model. Response from server has nine fields, one is missing. If there is no nested mapping for this field (mapping:'x.y.z') everything is OK - store loads record, the field is empty. But if this field has to be loaded from some nested field and has mapping option - store fails to load ANYTHING.
UPDATE 2
I have found the code, that causes problems. The fact is: when Ext tries to load some field from Json it performs a check like this
(source["id"] === undefined) ? __field0.defaultValue : source["id"]
But when field has mapping option(mapping 'brand.id') Reader does it this way
(source.brand.id === undefined) ? __field20.defaultValue : source.brand.id
which causes error if source has no brand field.
In case you have same problems as I: you can fix it by overloading Ext.data.reader.Json's method createFieldAccessExpression
I agree that Ext should only fail to load that field, not the entire record. One option that isn't great, but should work, is instead use a mapping function:
{
name: 'brandId',
mapping: function(data, record) {
return data.brand && data.brand.id;
}
}
I could have the arguments wrong (I figured out that this feature existed by looking at the source code), so maybe put a breakpoint in there to see what's available if it doesn't work like this.
I think you're misinterpret mapping and nesting paradigms: these are not interchangeable.
If you define nesting in your data, the result MUST have the corresponding field.