This question is about Immutable.js library.
I have a List<T>, where T is {name: string, id: number}. I want to convert it to Map<number, T>, with id of T to the keys. Using standard method toMap gives me a Map with sequential indexes, and there is no way to hook there. And no method like indexBy or other. how to do that?
You can do it with a reducer like this:
function indexBy(iterable, searchKey) {
return iterable.reduce(
(lookup, item) => lookup.set(item.get(searchKey), item),
Immutable.Map()
);
}
var things = Immutable.fromJS([
{id: 'id-1', lol: 'abc'},
{id: 'id-2', lol: 'def'},
{id: 'id-3', lol: 'jkl'}
]);
var thingsLookup = indexBy(things, 'id');
thingsLookup.toJS() === {
"id-1": { "id": "id-1", "lol": "abc" },
"id-2": { "id": "id-2", "lol": "def" },
"id-3": { "id": "id-3", "lol": "jkl" }
};
Related
I want to retrieve all the key values from a JSON file. For example in :
{
"total_count": 6,
"incomplete_results": false,
"items": [
{
"url": "https://api.github.com/repos/Samhot/GenIHM/issues/6",
"id": 293237635,
"number": 6,
"title": "Rechercher des documents",
"user": {
"login": "Samhot",
"id": 7148311
]
}
I would like to get :
["total_count", "incomplete_results", "items", "url", "url", "number", "title", "user", "login", "id"]
I have a function which return the content of my JSON in an observable :
getConfig(): Observable<any> {
return this.http.get<any>(this.myURL);
}
After that the data are reformated with .map to get only the keys with the Object.keys() function :
merge()
.pipe(
startWith({}),
switchMap(() => {
return this.getConfig();
}),
map(data => {
return Object.keys(data.items[0]);
}
)
)
.subscribe(data => {
this.dispo = data;
});
My problem is that i get only the keys that are in the level of the JSON I told
(data.items[0]) and not the ascendants or the descendants.
Of course I can create multiple requests but it asks to know in advance the structure of the JSON, what I want is to make it generic ...
How can I do to have an array with with all of my keys regardless of the structure of the JSON ?
Thanks in advance !
You would need to do a recursive function like:
function getDeepKeys(obj) {
const keys = Object.keys(obj);
const childKeys = keys
.map(key => obj[key])
.map(
value =>
Array.isArray(value)
? getDeepKeys(value[0])
: typeof value === "object"
? getDeepKeys(value)
: []
)
.reduce((acc, keys) => [...acc, ...keys], []);
return [...keys, ...childKeys];
}
const obj = {
total_count: 6,
incomplete_results: false,
items: [
{
url: "https://api.github.com/repos/Samhot/GenIHM/issues/6",
id: 293237635,
number: 6,
title: "Rechercher des documents",
user: {
login: "Samhot",
id: 7148311
}
},
{
url: "https://api.github.com/repos/Samhot/GenIHM/issues/6",
id: 293237635,
number: 6,
title: "Rechercher des documents",
user: {
login: "Samhot",
id: 7148311
}
}
]
};
console.log(getDeepKeys(obj));
Which then you would use like map(getDeepKeys). Note that this function assumes all the items in your array have the same schema.
I have a below json array of objects which have data of currency list.
[
{
id:"AUD",
value:"1.55"
},
{
id:"BGN",
value:"1.95"
},
{
id:"USD",
value:"1.17"
},
{
id:"CAD",
value:"1.51"
},
{
id:"EUR",
value:"1"
},
{
id:"INR",
value:"80.00"
}
]
I want to form a new array of object say newList with only currency value for USD, CAD and EUR. I can manually find the position of the object(eg: say item[3].value will give rate for CAD)and update the new object but I want to look for key values and get the values instead of getting index positions manually. How to do the same?
I hope this is what you expect.
This is your original list.
const list = [{ id: "AUD", value: "1.55" }, { id: "BGN", value: "1.95" }, { id: "USD", value: "1.17" }, { id: "CAD", value: "1.51" }, { id: "EUR", value: "1" }, { id: "INR", value: "80.00" }];
And this is how you can extract the wanted objects by comparison with their id.
const newList = list.filter(el => this.matches(el.id));
console.log(newList);
This method does the comparison for you and returns true when id matches. You can dynamically remove or add currencies.
private matches(id: string): boolean {
let match: boolean = false;
switch (id) {
case 'AUD':
match = true;
break;
case 'USD':
match = true;
break;
case 'EUR':
match = true;
break;
default:
match = false;
break;
}
return match;
}
i want to just add an element to a list somewhere in my immutable object tree.
This question appears to have been answered here :
Append value to List
But for some reason it does not work for me.
If I have the following code :
var myState = {
a: {
b: {
c: [
{name: 'hi', value: 2},
{name: 'howdy', value: 3}
]
}
}
}
myState = Immutable.fromJS(myState);
myState = myState.update(['a', 'b', 'c'], function (myList) {
myList.push({"name": "hallo", "value": 4})
}
);
I get an error :
Uncaught TypeError: Cannot read property 'push' of undefined
which indicates that the myList parameter being passed into the callback is null.
Why is this happening?
fiddle:
https://codepen.io/owatkins/pen/brMava
This is how it should be written:
myState.updateIn(['a', 'b', 'c'], function (myList) {
return myList.push({"name": "hallo", "value": 4})
}
);
Below is a working example:
var myState = Immutable.fromJS({
a: {
b: {
c: [{
name: 'hi',
value: 2
},
{
name: 'howdy',
value: 3
}
]
}
}
})
myState = myState.updateIn(['a', 'b', 'c'], function(myList) {
return myList.push({
"name": "hallo",
"value": 4
})
});
console.info('myState = ' + myState.toJS())
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"></script>
notice that I'm using updateIn instead of update and returning the result of push
After much stuffing around, the only solution I could come up with is to get the array, and convert to JS, push an element onto it, then convert it back to an immutable... and then use setIn, NOT updateIn, and NOT update.
var myState = {
a: {
b: {
c: [
{name: 'hi', value: 2},
{name: 'howdy', value: 3}
]
}
}
}
myState = Immutable.fromJS(myState);
var list = myState.getIn(['a', 'b', 'c'])
var list = list.toJS();
list.push({"name": "hallo", "value": 4});
var v = Immutable.fromJS(list)
myState = myState.setIn(['a', 'b', 'c'], v)
This looks like a horrible solution, but it is the only thing that works for me so far.
Usually it takes about 5 minutes to learn how to add an element to a list in a framework or language.
I wasn't expecting it to take 5 HOURS.
The documentation for this framework is an absolute disgrace.
I am attempting to pull data out of json like this, which is imported as "values"
{
"content": {
"person": [
{
"name": "Test"
"age" : "24:
}
]
}
}
I am using .map like below but getting the error .default.map is not a function I believe it is because i have objects not arrays, i've tried a bunch of stuff including object.keys but i'm getting errors all over the place, any direction would be appreciated.
import values from './sample.json'
const vals = values.map((myval, index) => {
const items = person.items.map((item, i) => {
return (
<div>{item.name}</div>
)
})
return (
<div>{items}</div>
)
})
I think your data and code have some errors. But after fixing those and also changing the name from 'person' to 'people' if that's what you are after, here's the code that does what you are trying to do:
var data = {
content: {
people: [
{
name: "Test",
age: 24,
},
{
name: "Foo",
age: 25,
},
],
},
};
var App = React.createClass({
render: function () {
var people = data.content.people.map(function (person) {
return <div>{person.name}</div>;
});
return <div>{people}</div>;
},
});
ReactDOM.render(<App />, document.getElementById("app"));
And here's the JSBin for that: https://jsbin.com/coyalec/2/edit?html,js,output
Update: I'm updating the answer with more detailed example. It now deals with data more generically, like it doesn't assume what are the entries of 'contents' and such, but it knows that each type like 'people' or 'pets' are an array.
var data = {
content: {
people: [
{
name: "Test",
age: 24,
},
{
name: "Foo",
age: 25,
},
],
pets: [
{
name: "Sweety",
age: 3,
},
{
name: "Kitty",
age: 5,
},
],
},
};
var App = React.createClass({
render: function () {
// Get the keys in data.content. This will return ['people', 'pets']
var contentKeys = Object.keys(data.content);
// Now start iterating through these keys and use those keys to
// retrieve the underlying arrays and then extract the name field
var allNames = contentKeys.map((t) =>
data.content[t].map((e) => <div>{e.name}</div>)
);
return <div>{allNames}</div>;
},
});
ReactDOM.render(<App />, document.getElementById("app"));
And here's the latest JSBin: https://jsbin.com/coyalec/4/edit?html,js,output
I will make Ajax call on my Controller action method. I want result of JSON in this format.
// array of all brands
var brands = [
{ brandId: 1, name: "Ford" },
{ brandId: 2, name: "BMW" }
];
for this i will make another call
// array of all models
var models = [
{ modelId: 1, name: "Explorer", brandId: 1},
{ modelId: 2, name: "Focus", brandId: 1},
{ modelId: 3, name: "X3", brandId: 2},
{ modelId: 4, name: "X5", brandId: 2}
];
How can i do that please guide me.
You can use following code to solve your problem
public ActionResult SomeActionMethod(int id)
{
return Json(new {foo="bar", baz="Blech"});
}
Method from the jquery getJSON method by simply...
$.getJSON("../SomeActionMethod", { id: someId },
function(data) {
alert(data.foo);
alert(data.baz);
}
);
To serialize json in your controller, may be you can use http://www.newtonsoft.com/json/help/html/serializingjson.htm