Display the right value from API result - AngularJS Internationalization - javascript

I'm making a huge application running under AngularJS and getting data from an API. i18n module I'm using is :
angular-translate
I fell in front of a problematic that I haven't found a solution yet, let me explain.
In the result of my API I have several value which can have this format:
1st possible format :
{
country: {
label: {
fr: 'France',
en: 'France',
}
}
}
2nd possibility :
{
country: {
label_fr: 'France',
label_en: 'France',
}
}
}
Exemple of use case : Using a select in a form
I can't use a custom directive to process all the check and parse the correct value from the current langage used in the App.
"label" value (label_fr label_en or label.fr label.en)
So, How can I display the good value from the API result ?
I must accept both format. But I can code the logic part for this. In First I mostly want make it works for one format and later I'll figure out how to make them work.
If any one have an idea or a solution to solve my problem I'll be very thankful.

Related

gatsby createNodeField based on configOption & best way for multiple plugin calls?

I am working on a custom source plugin and I have 2 issues:
First, I want to create a field in the node my plugin creates, but i want the value of that field to be one of the config options
Something like this
{
resolve: 'plugin-name',
options: {
option1: 'value1'
},
},
createNodeField({
name: `field1`,
node,
value: configOption1,
})
Is that possible?
And also, whats the best way to do multiple calls of the same plugin? The API I am using forces me to do one request at a time for the data i need, no "overall" request.. is there a better way to do that instead of having {resolve: 'plugin-name', options: {option1} } x-times with different options in my gatsby-config.js?

Angular2, child properties and elvis operator

So i have a complex date model coming from the server to feed my Angular2 component. Following shows a small part of the template for this component:
<div>
<span>{{Person.Address.City}}</span>
<input type="text" [(ngModel)]="Person.Address.City" />
</div>
The Address might be null or undefined depending on the data that's returned from the server. I know that elvis operator will save me from one error:
<span>{{Person?.Address?.City}}</span>
but unfortuantely it won't save me for [(ngModel)]="Person.Address.City" as there is no elvis defined for that. You'll get a parser error if you do something like [(ngModel)]="Person?.Address?.City" and if you don't then you'll get the null exception.
Here are two simplest variation of data, although there can be a lot more:
{
Name:'sam',
LastName: 'jones',
Address: {
Street: '123 somewhere',
City: 'some land'
State: 'SL'
}
}
or...
{
Name:'sam',
LastName: 'jones'
}
Since the responsibility of handling these scenarios should be on Angular2 rather than the server that provides the data, due to separation of presentation and business logic, how would I handle the scenario(s)?
So as it turns out, you either maintain 3 models, one for front-end (Angular2), one for middle tier (ASP.NET, JAVA, etc...) and another for your data model. Or you could make sure, as i did, that your middle-tier model will not have a null complex object. This means initializing complex properties inside your model and getting away with 2 models.
Also to note, if you have don't or can't modify your middle-tier model, then your only option is to create a compatible model for your front-end (Angular2) and merge as necessary once data has returned from API, service, etc..
At the service level you can add a blank object for Address. Right after receiving a response.
This way you fix the problem at it's source for entire application.
Here is simple solution with RxJS:
this._http.get(url)
.map(res => res.json())
.map(res => {
if (res.Address === null || res.Address === undefined) {
res.Address = {}
}
return object;
});
You might also want to consider removing the Address object if it is blank, right before saving it.

Creating a reference with CloudKit JS

I'm creating a record that should have a reference to another record.
I already created a record that has for RecordName France and for record type Countries. The record I now want to create looks like this:
var operations = container.publicCloudDatabase.newRecordsBatch(); // I'm normally creating many cities at once, newRecordsBatch() also works with only one record.
operations.create({
recordName: 'Paris'
recordType: 'Cities',
fields: {
Country: {
value: 'France'
}
}
});
operations.commit().then(function(response) {
if(response.hasErrors) {
console.log(response.errors[0]);
}
});
In the CloudKit Dashboard I have set that Cities to have one reference to Countries using the field Country. However when running the code it returns the server responded with a status of 400 (Bad Request).
I watched the WWDC video and the only thing Apple says about references in CloudKit JS is use a Reference object. I don't know what it is, I guess it's a JSON object but does someone know what are the key/values of this object?
A Reference object is a dictionary with the following keys:
recordName: The unique name used to identify the record within a zone. Required.
zoneID: Dictionary that identifies a record zone in the database.
action: The delete action for the reference object. NONE or DELETE_SELF or VALIDATE. Required.
Example of a good syntax for the Country field:
Country: {
value: {
recordName: 'France',
action: 'DELETE_SELF'
}
}
More info available in the documentation, pages 68-69.

Dojo JsonRestStore with array not at root-level of JSON response

Is there a way to configure a JsonRestStore to work with an existing web service that returns an array of objects which is not at the root-level of the JSON response?
My JSON response is currently similar to this:
{
message: "",
success: true,
data: [
{ name: "Bugs Bunny", id: 1 },
{ name: "Daffy Duck", id: 2 }
],
total: 2
}
I need to tell the JsonRestStore that it will find the rows under "data", but I can't see a way to do this from looking at the documentation. Schema seems like a possibility but I can't make sense of it through the docs (or what I find in Google).
My web services return data in a format expected by stores in Ext JS, but I can't refactor years worth of web services now (dealing with pagination via HTTP headers instead of query string values will probably be fun, too, but that's a problem for another day).
Thanks.
While it's only barely called out in the API docs, there is an internal method in dojox/data/JsonRestStore named _processResults that happens to be easily overridable for this purpose. It receives the data returned by the service and the original Deferred from the request, and is expected to return an object containing items and totalCount.
Based on your data above, something like this ought to work:
var CustomRestStore = declare(JsonRestStore, {
_processResults: function (results) {
return {
items: results.data,
totalCount: results.total
};
}
});
The idea with dojo/store is that reference stores are provided, but they are intended to be customized to match whatever data format you want. For example, https://github.com/sitepen/dojo-smore has a few additional stores (e.g. one that handles Csv data). These stores provide good examples for how to handle data that is offered under a different structure.
There's also the new dstore project, http://dstorejs.io/ , which is going to eventually replace dojo/store in Dojo 2, but works today against Dojo 1.x. This might be easier for creating a custom store to match your data structure.

LumX lx-select not updating ng-model

I started using the LumX framework recently, and I was trying to use their Selects directive here, but I'm not clear on their documentation. This is what I've got so far:
<lx-select ng-model="selectedPriority" placeholder="Priority" choices="priorities">
<lx-select-selected>
{{ $selected.name }}
</lx-select-selected>
<lx-select-choices>
{{ $choice.name }}
</lx-select-choices>
</lx-select>
And this is how I'm defining priorities (within the controller for the div containing the lx-select)
$scope.priorities = [
{ name: 'Urgent', id: 1 },
{ name: 'Very important', id: 2 },
{ name: 'Not important', id: 3 },
{ name: 'None', id: 4 }
];
Which does give me a list to select from, but the selectedPriority model never gets updated, so that whenever I try to use that value, it's always undefined. I can't even run the example they provide in the documentation page, but I'm not sure what I'm missing.
So initializing the selectedPriority variable this way:
$scope.selects = {
selectedPriority: undefined,
};
seemed to do the trick. I tried without declaring selectedPriority inside an array but as far as I could tell, this is the only way the model gets properly updated.
Check your angular version and see if it matches your lumX version's minimum requirements.
For example a match of version 0.3.24 of lumX and version 1.2.28 of angular would produce exactly the issue you have encountered (model wouldn't update), as far as I have experimented.

Categories