ESLint no-multi-spaces allow within object declaration - javascript

How do I configure the no-multi-spaces rule to allow the following:
var arr = [
{id: 'abc', content: 'foo'},
{id: 'cdefgh', content: 'bar'}
];
By default it complains about the space before content. I guess I need to add an AST node to the exceptions but I don't know which.

In the documentation it is stated:
The easiest way to determine the node types for exceptions is to use the online demo.
So I went ahead and put your code in there and got the AST. The following part seems to be the relevant one:
{
"type": "ObjectExpression",
"start": 16,
"end": 46,
"properties": [
{
"type": "Property",
"start": 17,
"end": 26,
"key": {
"type": "Identifier",
"start": 17,
"end": 19,
"name": "id"
},
"value": {
"type": "Literal",
"start": 21,
"end": 26,
"value": "abc",
"raw": "'abc'"
},
"kind": "init"
},
{
"type": "Property",
"start": 31,
"end": 45,
"key": {
"type": "Identifier",
"start": 31,
"end": 38,
"name": "content"
},
"value": {
"type": "Literal",
"start": 40,
"end": 45,
"value": "foo",
"raw": "'foo'"
},
"kind": "init"
}
]
},
Since your code seems to pertain to the whole object, I would guess that the AST node you seek is ObjectExpression.
/* eslint no-multi-spaces: [2, { exceptions: { "ObjectExpression": true } }] */
Please let me know if this works.

Related

Returned multiple items from dict is showing duplicate items in map function

I am building a simple react app and I am trying to return specific items if matched from passed argument in function.
In Brief :-
I made a function to check if given argument's ids is in function's dict or not, if passed argument's ids matches any of the dict keys then return all matching dict values. But It is showing duplicate results in almost every map item in App component
App.js
function CheckItems(ids) {
const dictToCheck = [
{"id": 13, "type": "good"},
{"id": 14, "type": "bad"},
{"id": 15, "type": "excellent"},
{"id": 16, "type": "fabulous"},
{"id": 17, "type": "not good"},
{"id": 19, "type": "not bad"},
{"id": 15, "type": "not gross"},
{"id": 16, "type": "junk"},
{"id": 39, "type": "trash"},
]
return (
{
dictToCheck.map(({id, type}) =>
ids.map((ids) =>
id == ids && <div>{type}</div>
)
)
}
)
}
function App() {
const apiItems = [
{
"title": "First Job",
"description": "Unknown",
"ids": [
13, 15
]
},
{
"title": "Second Job",
"description": "Unknown",
"ids": [
39, 16
]
},
{
"title": "Third Job",
"description": "Unknown",
"ids": [
17
]
}
]
return (
<div>
<h2>Items</h2>
{apiItems.map((item) =>
<div>
{item.title}
{CheckItems(item.ids)} // [13, 16]
</div>
}
</div>
),
}
When I run above function then It is showing duplicate items returned like
First Job
bad, excellent, bad
Second Job
trash, junk, trash
Third Job
not good, not good
Expecting response in App component :-
First Job
bad, excellent
Second Job
trash, junk
Third Job
not good
Any help would be much Appreciated.
First of all replace your duplicate ids.
I would recommend that you do a second map function in you app and return only the values in you CheckItems function. Something like this:
function CheckItem(id) {
const dictToCheck = [
{"id": 13, "type": "good"},
{"id": 14, "type": "bad"},
{"id": 15, "type": "excellent"},
{"id": 16, "type": "fabulous"},
{"id": 17, "type": "not good"},
{"id": 19, "type": "not bad"},
{"id": 20, "type": "not gross"},
{"id": 21, "type": "junk"},
{"id": 39, "type": "trash"},
]
const targetType = dictToCheck.find(item => item.id == id);
return targetType.type
}
function App() {
const apiItems = [
{
"title": "First Job",
"description": "Unknown",
"ids": [
13, 15
]
},
{
"title": "Second Job",
"description": "Unknown",
"ids": [
39, 16
]
},
{
"title": "Third Job",
"description": "Unknown",
"ids": [
17
]
}
]
return (
<div>
<h2>Items</h2>
{apiItems.map((item) =>
<div>
{item.title}
{item.ids.map((id, index) => {
<div>{CheckItem(id)}</div>
})}
</div>
}
</div>
),
}
or if you want to keep that the CheckItems function to returns a HTML emlement
function CheckItems(ids) {
const dictToCheck = [
{"id": 13, "type": "good"},
{"id": 14, "type": "bad"},
{"id": 15, "type": "excellent"},
{"id": 16, "type": "fabulous"},
{"id": 17, "type": "not good"},
{"id": 19, "type": "not bad"},
{"id": 20, "type": "not gross"},
{"id": 21, "type": "junk"},
{"id": 39, "type": "trash"},
]
const targetItems = dictToCheck.filter(item => ids.includes(item.id));
return (
{
targetItems.map(item =>
<div>{item.type}</div>
)
}
)
}
This can help, filter the list according to the id before mapping:
function CheckItems(ids) {
let dictToCheck = [
{"id": 13, "type": "good"},
{"id": 14, "type": "bad"},
{"id": 15, "type": "excellent"},
{"id": 16, "type": "fabulous"},
{"id": 17, "type": "not good"},
{"id": 19, "type": "not bad"},
{"id": 15, "type": "not gross"},
{"id": 16, "type": "junk"},
{"id": 39, "type": "trash"},
]
let uniq_elt = {};
dictToCheck=dictToCheck.filter(obj => !uniq_elt[obj.id] && (uniq_elt[obj.id] = true))
return (
{
dictToCheck.filter(item=> ids.includes(item.id)).map(({id, type}) =>
<div>{type}</div>
)
}
)
}
function App() {
const apiItems = [
{
"title": "First Job",
"description": "Unknown",
"ids": [
13, 15
]
},
{
"title": "Second Job",
"description": "Unknown",
"ids": [
39, 16
]
},
{
"title": "Third Job",
"description": "Unknown",
"ids": [
17
]
}
]
return (
<div>
<h2>Items</h2>
{apiItems.map((item) =>
<div>
{item.title}
{CheckItems(item.ids)}
</div>
}
</div>
),
}

Vega-Lite Wilkinson Dot Plot, group by first digit

I see the code to create a Wilkinson Dot Plot in Vega-Lite:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A Wilkinson Dot Plot",
"height": 100,
"data": {
"values": [
10,11,11,11,14,15,17,
22,25,26,28,
33,33,33,34,37
]
},
"transform": [{
"window": [{"op": "rank", "as": "id"}],
"groupby": ["data"]
}],
"mark": {
"type": "circle",
"opacity": 1
},
"encoding": {
"x": {"field": "data", "type": "ordinal"},
"y": {"field": "id", "type": "ordinal", "axis": null, "sort": "descending"}
}
}
Creates a plot grouping the exact numbers, but I'd like the output to be by the first digit so really theres 7 vertical dots for 1, 4 vertical dots for 2, and 5 vertical dots for 3. I tried adding calculation: "str.map(x => x.charAt(0))" to the transform array so I could group by that, but was unsuccessful in my execution. Any ideas appreciated!
You were on the right track, except that calculate transforms cannot use arbitrary javascript code, but only the subset made available in Vega Expressions. So, for example, you could do something like this (vega editor):
{
"data": {
"values": [10, 11, 11, 11, 14, 15, 17, 22, 25, 26, 28, 33, 33, 33, 34, 37]
},
"transform": [
{"calculate": "floor(datum.data / 10)", "as": "data"},
{
"window": [{"op": "rank", "field": "data", "as": "id"}],
"groupby": ["data"]
}
],
"mark": {"type": "circle", "opacity": 1},
"encoding": {
"x": {"field": "data", "type": "ordinal"},
"y": {"field": "id", "type": "ordinal", "axis": null, "sort": "descending"}
}
}

Sorting/Filtering JSON based on certain property

So I got this response from an API.
I want to build a select box from all types, how do I extract only JSON related to skill_level from this JSON without using loops.
[
{
"id": 32,
"name": "Beginner",
"type": "skill_level"
},
{
"id": 33,
"name": "Intermediate",
"type": "skill_level"
},
{
"id": 34,
"name": "Experienced",
"type": "skill_level"
},
{
"id": 35,
"name": "Professional",
"type": "skill_level"
},
{
"id": 36,
"name": "Expert",
"type": "skill_level"
},
{
"id": 37,
"name": "Male",
"type": "sex"
},
{
"id": 38,
"name": "Female",
"type": "sex"
},
{
"id": 39,
"name": "Single",
"type": "marital_status"
},
{
"id": 40,
"name": "Married",
"type": "marital_status"
},
{
"id": 41,
"name": "Divorced",
"type": "marital_status"
},
{
"id": 42,
"name": "Not Wish To Say",
"type": "marital_status"
}
]
Check out Array.prototype.filter:
var skillLevels = data.filter(function(item) {
return item.type === 'skill_level';
});
From the docs, this works as follows:
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
Assuming that data refers to the array you provided in your question, this will result with skillLevels being a new array containing all of the items where item.type was equal to "skill_level".
You can do this with lodash:
$scope.data = ...;
$scope.filtered = _.filter($scope.data, { 'type': 'skill_level' });
This will return only the objects that have skill_level for type.
I just figured out that you can also do it this way in AngularJs:
<select id="sex" name="sex" ng-model="sex">
<option ng-repeat="option in $scope.data | filter:{type: 'sex'}" value="{{option.id}}">{{option.name}}</option>
</select>

access arrays inside an object

I have an object structure as given below. I had grouped like this using underscore js based on the id values
{
"1": [
{
"id": 1,
"tailName": "ABQ-PHX",
"itemId": 1,
"name": "a1",
"start": "24-11-2013,2:38",
"end": "29-11-2013,18:22"
},
{
"id": 1,
"tailName": "ABQ-PHX",
"itemId": 9,
"name": "a2",
"start": "16-12-2013,10:46",
"end": "18-12-2013,10:46"
}
],
"2": [
{
"id": 2,
"tailName": "BNA-RDU",
"itemId": 14,
"name": "b1",
"start": "21-11-2013,11:38",
"end": "15-12-2013,7:52"
}
]
}
Please advise how to access the array from the above object.
I want to access the first array (i.e)
[
{
"id": 1,
"tailName": "ABQ-PHX",
"itemId": 1,
"name": "a1",
"start": "24-11-2013,2:38",
"end": "29-11-2013,18:22"
},
{
"id": 1,
"tailName": "ABQ-PHX",
"itemId": 9,
"name": "a2",
"start": "16-12-2013,10:46",
"end": "18-12-2013,10:46"
}
]
Both your_object[1] and your_object["1"] will give you the result.

JSON Bind to Javascript Object

All,I saw lot of examples talking about how to parse json to js object(or convert json to js object) in SO. But I didn't saw an example which is binding json to already defined js object. Now I have some trouble with it when I am trying to make it.Please help me to review it . thanks.
What I had done so far looks like below:
top=function()
{
this.encoding ='';
this.nodes=[];
this.lastid='';
//I don't how to defined the attributes key in json which is a object.
//I think there should exist a parse and toJson function;
//this.parse= function(jsonstring){...};
//this.toJson=function(){var jsonstr=....;return jsonstr;};
};
group=functon()
{
this.id='';
this.type='';
this.subnodes=[];
this.tagname='';
//....
}
top is the root which contains uncertain numbers of block which is self-included object .
and the Json is generate by Jackson, which looks like below .
{
"nodes": [
{
"type": "group",
"id": 11,
"tagName": "blockrow",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"width": "12"
//...more
},
"subNodes": [
{
"type": "group",
"id": 111,
"tagName": "blockcol",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"width": "4"
},
"subNodes": [
{
"type": "group",
"id": 1111,
"tagName": "section",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"title": "NewSection",
"width": "12"
},
"subNodes": [
{
"type": "leaf",
"id": 11111,
"tagName": "message",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"key": "aa_login_success"
}
}
]
}
]
},
{
"type": "group",
"id": 112,
"tagName": "blockcol",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"width": "4"
},
"subNodes": [
{
"type": "group",
"id": 1121,
"tagName": "section",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"title": "NewSection",
"width": "12"
},
"subNodes": [
{
"type": "leaf",
"id": 11211,
"tagName": "message",
"prefix": "aa",
"cutomTag": {
"type": "cutomTag",
"beginPos": 20,
"endPos": 50,
"id": -1
},
"attributes": {
"key": "aa_login_failed"
}
}
]
}
]
},
{
"type": "group",
"id": 113,
"tagName": "blockcol",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"width": "4"
},
"subNodes": null
}
]
},
{
"type": "group",
"id": 12,
"tagName": "blockrow",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"width": "12"
},
"subNodes": [
{
"type": "group",
"id": 121,
"tagName": "blockcol",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"width": "6"
},
"subNodes": null
},
{
"type": "group",
"id": 122,
"tagName": "blockcol",
"prefix": "aa",
"cutomTag": null,
"attributes": {
"width": "6"
},
"subNodes": null
}
]
}
],
"version": 1,
"encoding": "unicode",
"lastId": 1
}
the kind of code I imagine would looks like below :
var curTop= new top();
curTop.parse(jsonstring);
//manipulate the curTop object...
//...
var jsonStr=curTop.toJson();
//convert object to json.
I hope my direction so far to solve the problem is right, if it is not right, I hope you give me some kind comments.
You should define functions on the prototype:
top.prototype.parse= function(jsonstring){...};
This way they are shared between instances. You can access members of the current instance via this.variable syntax.
For more information on how prototype works you can check out : https://stackoverflow.com/a/4778408/390330
Your complete function will look something like:
top.prototype.parse= function(jsonstring){
var data = JSON.parse( json_string );
this.encoding = data.encoding;
// etc.
};
try this one ..this one way to convert string to object..
var response = eval('(' + data + ')');
try this code..
var arr_from_json = JSON.parse( json_string );

Categories