I have a form which collects some information (asset cost, asset description, shareholders, and how much each of the shareholders own). I want to compile all this information in a JSON object and post it. When I collect the data and JSON.stringify() it, it looks like this:
[ { name: '1', value: '50' },
{ name: 'asset_desc', value: 'boat' },
{ name: 'asset_cost', value: '100' },
{ name: 'org_id', value: '2' },
{ name: '3', value: '50' },
{ name: 'asset_desc', value: 'boat' },
{ name: 'asset_cost', value: '100' },
{ name: 'org_id', value: '2' } ]
I want to clean this data up before posting so it looks like this:
{
"asset_desc": "boat",
"asset_cost": "100",
"org_id": 2,
"share_holders": {
"1": "50",
"2": "50"
}
}
I am running jQuery. Does jQuery have some built-in helpers that would make the cleaning up of this data simple? The function I'm using to get the data like this in the first place is:
formdata = $('#addpurchaseform');
data = JSON.stringify(formdata.serializeArray());
Is there a better way to do this so that my data is in a cleaner state? Am I even thinking about this correctly (I am new to web development)?
Not sure if this matters, but the receiving end of this is Python / Django so I figured it would be better if I sent a clean JSON object rather than trying to parse / clean the mess after it was received.
If you're looking for a jQuery plugin, then try this:
https://github.com/marioizquierdo/jquery.serializeJSON
Related
I have a complex query with 100s of fields and nested fields. What I want to do is, for each Index, extract the English and French text. As you can see in the array, there is no French text for some indexes. In that case I want to get the English text.
For me extracting the English text works fine because the text is already there, but incase of French, I get undefined errors. What would be the best way to implement this. Is Loadash needed for this or just pure JS methods?
Just to be clear, I have erros with extracting french because in some fields, french text is not available, I want to use the english value in that case.
Also It is recommend if I am able to get the English and French values by it's language field rather than the index. I have no idea how to do that.
Any suggestion, documentation is appreciated. Thank you!
example array:
[
{
id: "1",
name: [
{
language: "en-US",
text: "HOLIDAY"
}
],
order: 6,
Groups: [
{
name: [
{
language: "en-US",
text: "REGULAR"
}
],
code: "REGEARN"
},
{
name: [
{
language: "en-US",
text: "CHARGE"
}
],
code: "CHARGE"
}
]
}
]
and here is the code sandbox that reproduces my error:
CODE SAND BOX
https://codesandbox.io/s/javascript-forked-5073j
EDIT:
EXPECTED OUTPUT:
{
key: key,
englishtext: "Value Here",
frenchtext: "Value Here"
}
below is a working code, but issue is it does not work when there is no french language or that field. I get undefined errors. So is it possible I can get the needed data from the language field?
x.map((y) => ({
key: y.id,
name: y.name[0].text,
groupname: y.Groups ? x.Groups[0].name?.[0].text : 'N/A',
}))
Do you expect result like this? If you don't mind lodash.
const _ = require('lodash');
const getNames = (arr) => {
return arr.map((obj) => {
const id = obj.id;
const englishtext = _.get(obj, 'name[0].text', 'N/A');
const frenchtext = _.get(obj, 'name[1].text', englishtext);
return { id, englishtext, frenchtext };
});
};
console.log(getNames(x));
// [
// { id: '1', englishtext: 'HOLIDAY', frenchtext: 'HOLIDAY' },
// { id: '2', englishtext: 'Stat Holiday', frenchtext: 'Congé Férié' },
// { id: '3', englishtext: 'Over', frenchtext: 'Over' }
// ]
Our GraphQL server responds to a query with data that includes an array of objects each of which shares the same id and different values for a different key. For instance, we might have an array that looks like:
[
{ id: 123, name: 'foo', type: 'bar', cost: 5 },
{ id: 123, name: 'foo', type: 'bar', cost: 6 },
{ id: 123, name: 'foo', type: 'bar', cost: 7 },
{ id: 123, name: 'foo', type: 'bar', cost: 8 }
]
We can see in the Network tab that the response from the server has the correct data in it. However, by the time it goes through processing by the Apollo Client module the array has been transformed into something that might look like this:
[
{ id: 123, name: 'foo', type: 'bar', cost: 5 },
{ id: 123, name: 'foo', type: 'bar', cost: 5 },
{ id: 123, name: 'foo', type: 'bar', cost: 5 },
{ id: 123, name: 'foo', type: 'bar', cost: 5 }
]
Essentially what we're seeing is that if all of the objects in an array share the same value for id then all objects in the array become copies of the first object in the array.
Is this the intended behavior of Apollo Client? We thought maybe it had something to do with incorrect caching, but we were also wondering if maybe Apollo Client assumed that subsequent array members with the same id were the same object.
It looks like this is behavior as intended. The Apollo Client normalizes on id.
As the other answer suggests this happens because Apollo normalises by ID. There's a very extensive article on the official blog that explains the rationale of it, along with the underlying mechanisms.
In short, as seen by Apollo's cache, your array of objects contains 4 instances of the same Object (id 123). Same ID, same object.
This is a fair assumption on Apollo's side, but not so much in your case.
You have to explicitly tell Apollo that these are indeed 4 different items that should be treated differently.
In the past we used dataIdFromObject, and you can see an example here.
Today, you would use typePolicies and keyfields:
const cache = new InMemoryCache({
typePolicies: {
YourItem: {
// Combine the fields that make your item unique
keyFields: ['id', 'cost'],
}
},
});
Docs
It works for me:
const cache: InMemoryCache = new InMemoryCache({ dataIdFromObject: o => false )};
previous answer solves this problem too!
Also you can change the key name(for example id => itemId) on back-end side and there won't be any issue!
I have the same issue. My solution is to set fetchPolicy: "no-cache" just for this single API so you don't have to change the InMemoryCache.
Note that setting fetchPolicy to network-only is insufficient because it still uses the cache.
fetchPolicy document
I have successfully implement type ahead using angular js using this codepen.
Now my data is dynamic so I want to create my own json that should looks something like following:
$scope.states = [
{
name: "ABCD",
id: "AB"
},
{
name: "XYZ",
id: "XY"
},
{
name: "OPQR",
id: "OP"
},
{
name: "LMNO",
id: "LM"
},
{
name: "KLM",
id: "KL"
}
];
How to create like above json and store in $scope variable so I can access it using name and id separately.
Please help me...!!
I am giving by my own now cause I got it little bit late.
Solution is I have pushed the data wrong I have solved it like:
$scope.states.push({
name: "string",
id: int,
});
and I got it.
I would like to generate this array in a JavaScript file
var sports = [{ id: 1, value: "Baseball" },
{ id: 2, value: "Soccer" },
{ id: 3, value: "Basketball" },
{ id: 4, value: "Volleyball" },
{ id: 5, value: "Tennis" },
{ id: 6, value: "Running" },
{ id: 7, value: "Swimming" },
{ id: 8, value: "Tournament"}];
I have started with:
var sports = db.Sports;
But now I am stuck on how to include this in a JavaScript file. Does .net have embedded JavaScript file like Rails do?
You'll need to just retrieve the data and serialize it into javascript. If those two are the only columns, you can do a straight serialization with JavaScriptSerializer or JSON.NET. If not, you'll need to convert them, maybe something like (using JSON.NET):
var x = db.Sports.Select(s => new { id = s.id, value = s.value }).ToArray();
string json = JsonConvert.SerializeObject(x);
Once you have this JSON string, you can dump it onto a page however you want, or write it directly to the response.
If you need to know a specific way to do this part, we'd need more details (WebForms or MVC, inside a page or a separate javascript resource, etc.)
EDIT:
Adding it to the view once it's in the ViewBag is straightforward. Inside your script on the view:
var sports = #Html.Raw(ViewBag.Sports);
// or if you're not using Razor:
var sports = <%= ViewBag.Sports %>;
Since ViewBag.Sports is already properly serialized, you don't need to worry about quotation marks or brackets.
I have a Backbone Collection of Models that have different data coming in on page load than when it's fetched.
For example, the attributes coming in on page load are:
[{ name: 'cat', color: 'yellow' },
{ name: 'dog', color: 'brown' },
{ name: 'fish', color: 'orange' }]
Then, on fetch() (or otherwise updated from the server while the page lives, the data looks like:
[{ name: 'cat', current: 5, total: 100 },
{ name: 'dog', current: 6, total: 50 },
{ name: 'fish', current:7, total: 25 }]
How can I update the Backbone Collection with the new data while retaining the old data? IDs are not assigned from the server (name is guaranteed unique).
I ended up going with this. This will update the properties for models that exist while also removing models that did not come in and adding new ones.
Backbone.Collection.prototype.update = function(col_in){
var self = this,
new_models = [];
_(col_in).each(function(mod_in) {
var new_model = self._prepareModel(mod_in),
mod = self.get(new_model.id);
if (mod) {
new_models.push(mod.set(mod_in, {silent:true}));
} else {
new_models.push(mod_in);
}
});
this.reset(new_models);
};
Note the use of _prepareModel this is important so that the Models can be identified via whatever "id" property is used in the Backbone Model object.