Is there a simpler way to retrieve the value "TestProject" in the JSON response rather than using a for loop in my code?
[
{
"Id": "9ac44c1d-0066-47aa-a2a2-a9b90109b0a5",
"Group": null,
"DataFields": [
{
"Header": "ProjectID",
"Value": "TestProject"
},
{
"Header": "uui_ConfigPack",
"Value": "75e8ce5a-7ae0-41ca-86f0-aca1e7158073"
}
],
"HasDocuments": null
}
]
var projResults = JSON.parse(responseBody);
var projNumber = 1;
dataProjectId = projResults[projNumber].Id;
projName = 'Not Found';
for (i = 0; i < projResults[projNumber].DataFields.length; i++)
{
if(projResults[projNumber].DataFields[i].Header == "ProjectID")
{
projName = projResults[projNumber].DataFields[i].Value;
}
}
It looks like you're trying to find an object in an array, for which the most idiomatic method to use is Array.prototype.find:
var projResults = [
{
"Id": "9ac44c1d-0066-47aa-a2a2-a9b90109b0a5",
"Group": null,
"DataFields": [
{
"Header": "ProjectID",
"Value": "TestProject"
},
{
"Header": "uui_ConfigPack",
"Value": "75e8ce5a-7ae0-41ca-86f0-aca1e7158073"
}
],
"HasDocuments": null
}
];
var projNumber = 0;
const foundObj = projResults[projNumber].DataFields.find(({ Header }) => Header === 'ProjectID');
const projName = foundObj ? foundObj.Value : 'Not Found';
console.log(projName);
You can use higher order functions like map filter reduce etc.
to avoid for-loops.
here is a 1 liner:
var obj = [
{
"Id": "9ac44c1d-0066-47aa-a2a2-a9b90109b0a5",
"Group": null,
"DataFields": [
{
"Header": "ProjectID",
"Value": "TestProject"
},
{
"Header": "uui_ConfigPack",
"Value": "75e8ce5a-7ae0-41ca-86f0-aca1e7158073"
}
],
"HasDocuments": null
}
]
console.log(obj.map(i => i.DataFields).flat(1).find(i => i.Header === 'ProjectID').Value);
As stated by CertainPerformance and vlaz. This will lead to bad performance because of multiple iterations.
But if you like a declarative coding style you can use RxJS
in which you can do something like:
var obs$ = from(obj);
obs$.pipe(
flatMap(i => i.DataFields),
filter(i => i.Header === 'ProjectID' )),
pluck('Value')
).subscribe(console.log);
which basically does the same thing but in a more performant way.
I would suggest reading about Array methods like:
map
filter
reduce
...
the functions will help you manage your arrays in an efficient way, it will make your code looks cleaner, and easy to read, you will find more information about it here:
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map
And i do suggest the 'javascript 30' of wesbos, he has a wonderful video about it :)
Related
I'm searching for a little help/advice. I had a task to create a multiple nested list from array of object. I did this, got a expected result, but the problem was my code was very complicated and not clean for sure, because i did it by mapping, filtering, and again mapping, mapped arrays. This give me a lot of code, and i am pretty sure you can do it a lot of easier, that's why i am searching for help. I am using react(18.2.0), but even good methods for situations like that in vanilla js will be very helpfull for me.
So there is one json file with a lot of data, i give a example because there is like Array[500+] object inside.
"data": [
{
"categoryId": 1,
"name": "Football",
"lvl": 1,
"parent": 0,
},
{
"categoryId": 2,
"name": "Basketball",
"lvl": 1,
"parent": 0,
},
{
"categoryId": 3,
"name": "Bundesliga",
"lvl": 2,
"parent": 1,
},
{
"categoryId": 4,
"name": "NBA",
"lvl": 2,
"parent": 2,
},
{
"categoryId": 5,
"name": "Wizzards",
"lvl": 3,
"parent": 4,
},
{
"categoryId": 6,
"name": "Lakers",
"lvl": 3,
"parent": 4,
},
.....and more
If parent === categoryId it means that it's children.
So the result component should give something like that:
- Football
- Bundesliga
- Basketball
- NBA
- Wizzards
- Lakers
I will be happy if you give me some good practices, advices about situations like that. Should i use recursion or what? :)
If you wanted to write this recursively, you could write it something like this:
const recursive = function(data, node, current, max) {
if(current > max) {
return {};
}
data.forEach( d => {
if(!node.children) {
node.children = [];
}
if(d.lvl === current && (d.parent === node.categoryId || current === 1)) {
node.children.push(d);
recursive(data, d, current+1, max)
}
});
}
let newObj = {};
let highestLevel = 1;
data.forEach(d => {
if(d.lvl > highestLevel) {
highestLevel = d.lvl;
}
})
recursive(data, newObj, 1, highestLevel)
I wrote this in playcode.io so that you can see it working: https://playcode.io/926085
The output is the entire objects, nested. But you can then print just the names from the resulting nested structure.
I don't think that this solution is the most optimal one, as far as time complexity goes. But it's a recursive example of how to solve the problem.
I'm open to someone optimizing this solution, as I am also interested in this problem.
UPDATE
I had a friend work on a solution. He optimized so that I think its O(n): https://playcode.io/926145/
const f = (input, map = {}) => {
input.forEach(d => {
const me = map[d.categoryId]
if(!me) {
map = {...map, [d.categoryId]: [] }
}
const siblings = map[d.parent]
if(siblings) {
map = {...map, [d.parent]: [...siblings, d]}
} else {
map = {...map, [d.parent]: [d]}
}
})
return map
}
const print = (map, input, toPrint, indent = 0) => {
toPrint.forEach(p => {
const ind = " ".repeat(indent)
console.log(`${ind} - ${p.name}`)
print(map, input, map[p.categoryId], indent + 2)
})
}
const map = f(data.data)
print(map, data.data, map[0])
We have an array similar to this:
const pages= [
{
"name": "Hello World",
"code": "hello-world",
"indent": 0,
"subpages": null
},
{
"name": "What is going on?",
"code": "what-is-going-on",
"indent": 1,
"subpages": null
},
{
"name": "My Page",
"code": "my-page",
"indent": 0,
"subpages": null
}
]
And we want to nest it so it looks like this:
"data": {
"hello-world": {
"name": "Hello World",
"subpages": {
"what-is-going-on": {
"name": "What is going on?",
"subpages": {}
}
}
},
"my-page": {
"name": "My Page",
"subpages": {}
}}}
So far, I was able to make it work, but it fails when there are MORE OBJECTS with GREATER INDENTS, or just more indents greater than 1 in a row.
This is the code I came up with
var arr = []
for (let i=0; i<pages.length; i++) {
if (pages[i].indent==0) {
arr.push(pages[i]);
}
else {
arr[i-1].children=pages[i]
}
}
Its hard to admit it, but I feel like this approach will not work with more data - greater indents. I don't really know where should my solution be heading from.
What do you think would work?
Thank you for your time.
You could do this using reduce method and use an array to keep indent levels.
const pages = [{"name":"Hello World","code":"hello-world","indent":0,"subpages":null},{"name":"What is going on?","code":"what-is-going-on","indent":1,"subpages":null},{"name":"My Page","code":"my-page","indent":0,"subpages":null}]
const result = {}
const levels = [result]
pages.reduce((r, {name, code, indent}) => {
const subpages = {}
r[indent][code] = {name, subpages}
r[indent + 1] = subpages
return r
}, levels)
console.log(result)
I can't set up an algo that counts my occurrences while respecting ESlint's 6 standards in javascript.
My input table is :
[
{
"id": 2,
"name": "Health",
"color": "0190fe"
},
{
"id": 3,
"name": "Agriculture",
"color": "0190fe"
},
{
"id": 1,
"name": "Urban planning",
"color": "0190fe"
},
{
"id": 1,
"name": "Urban planning",
"color": "0190fe"
}
]
And i want to get :
{"Urban planning": 2, "Health": 1, ...}
But that does not work with ESLINT / REACT compilation...
This is my code :
const jsonToIterate = *'MyPreviousInputJson'*
const names = []
jsonToIterate.map(item => (names.push(item.name)))
const count = []
names.forEach(item => {
if (count[item]){
count.push({text: item, value: 1})
} else {
count.forEach(function(top){top.text === item ? top.value =+ 1 : null})
}
})
Thank you so much
Well, you want an object in the end, not an array, so count should be {}. I also wouldn't use map if you're not actually returning anything from the call. You can use reduce for this:
let counts = topicsSort.reduce((p, c, i, a) => {
if (!p.hasOwnProperty(c.name)) p[c.name] = 0;
p[c.name]++;
return p;
}, {});
I'm half exppecting someone to close this as a duplicate because all you've asked for is a frequency counter. But here's an answer anyway:
const jsonToIterate = *'MyPreviousInputJson'*;
const names = {};
jsonToIterate.map(obj => {
if(obj.name in names){
names[obj.name]++
}
else{
names[obj.name] = 1;
}
})
My target is if the id from digital_assets and products matches then get the value of URL fro digital_assets and ProductName from products object. I'm able to traverse through the object and get the values of digital_assets and products but need some help to compare these two objects based on IDs to get the value of URL and ProductName. Below is what I've done so far.
var data = [{
"digital_assets": [{
"id": "AA001",
"url": "https://via.placeholder.com/150"
},{
"id": "AA002",
"url": "https://via.placeholder.com/150"
}]
}, {
"products": [{
"id": ["BB001", "AA001"],
"ProductName": "PROD 485"
},{
"id": ["BB002", "AA002"],
"ProductName": "PROD 555"
}]
}
];
$.each(data, function () {
var data = this;
//console.log(data);
$.each(data.digital_assets, function () {
var dAssets = this,
id = dAssets['id'];
// console.log(id);
});
$.each(data.products, function () {
var proData = this,
prod_id = proData['id'];
// console.log(prod_id);
$.each(prod_id, function () {
var arr_id = this;
console.log(arr_id);
});
});
});
Do I need to create new arrays and push the values into the new arrays? Then concat() these array to one. ? Bit lost any help will be appreciated.
Here is one way you can do this via Array.reduce, Array.includes, Object.entries and Array.forEach:
var data = [{ "digital_assets": [{ "id": "AA001", "url": "https://via.placeholder.com/150" }, { "id": "AA002", "url": "https://via.placeholder.com/150" } ] }, { "products": [{ "id": ["BB001", "AA001"], "ProductName": "PROD 485" }, { "id": ["BB002", "AA002"], "ProductName": "PROD 555" } ] } ]
const result = data.reduce((r,c) => {
Object.entries(c).forEach(([k,v]) =>
k == 'digital_assets'
? v.forEach(({id, url}) => r[id] = ({ id, url }))
: v.forEach(x => Object.keys(r).forEach(k => x.id.includes(k)
? r[k].ProductName = x.ProductName
: null))
)
return r
}, {})
console.log(Object.values(result))
You can use Array.prototype.find, Array.prototype.includes and Array.prototype.map to achieve this very gracefully.
let data = [
{
"digital_assets": [
{
"id": "AA001",
"url": "https://via.placeholder.com/150"
},
{
"id": "AA002",
"url": "https://via.placeholder.com/150"
}
]
},
{
"products": [
{
"id": ["BB001", "AA001"],
"ProductName": "PROD 485"
},
{
"id": ["BB002","AA002"],
"ProductName": "PROD 555"
}
]
}
];
// Find the 'digital_assets' array
let assets = data.find(d => d['digital_assets'])['digital_assets'];
// Find the 'products' array
let products = data.find(d => d['products'])['products'];
// Return an array of composed asset objects
let details = assets.map(a => {
return {
id : a.id,
url : a.url
name : products.find(p => p.id.includes(a.id)).ProductName
};
});
console.log(details);
changed answer to fit your needs:
var data = [
{
"digital_assets": [
{
"id": "AA001",
"url": "https://via.placeholder.com/150"
},
{
"id": "AA002",
"url": "https://via.placeholder.com/150"
}
]
},
{
"products": [
{
"id": ["BB001", "AA001"],
"ProductName": "PROD 485"
},
{
"id": ["BB002","AA002"],
"ProductName": "PROD 555"
}
]
}
]
let matchingIds = [];
let data_assetsObject = data.find(element => {
return Object.keys(element).includes("digital_assets")
})
let productsObject = data.find(element => {
return Object.keys(element).includes("products")
})
data_assetsObject["digital_assets"].forEach(da => {
productsObject["products"].forEach(product => {
if (product.id.includes(da.id)){
matchingIds.push({
url: da.url,
productName: product.ProductName
})
}
})
})
console.log(matchingIds);
working fiddle: https://jsfiddle.net/z2ak1fvs/3/
Hope that helped. If you dont want to use a new array, you could also store the respective data within the element you are looping through.
Edit:
I think i know why i got downvoted. My example works by making data an object, not an array. changed the snippet to show this more clearly.
Why is data an array anyway? Is there any reason for this or can you just transform it to an object?
Edit nr2:
changed the code to meet the expectations, as i understood them according to your comments. it now uses your data structure and no matter whats in data, you can now search for the objects containing the digital_assets / products property.
cheers
https://jsfiddle.net/2b1zutvx/
using map.
var myobj = data[0].digital_assets.map(function(x) {
return {
id: x.id,
url: x.url,
ProductName: data[1].products.filter(f => f.id.indexOf(x.id) > -1).map(m => m.ProductName)
};
});
I have the following Json
var myjson = [{
"files": [
{
"domain": "d",
"units": [
{
"key": "key1",
"type": "2"
},
{
"key": "key2",
"type": "2"
},
{
"key": "key3",
"type": "2"
}]
},
{
"domain": "d1",
"units": [
{
"key": "key11",
"type": "2"
},
{
"key": "key12",
"type": "2"
},
{
"key": "key13",
"type": "2"
}]
}]
},
{
"files": [
{
"domain": "d",
"units": [
{
......
I want to create an new array from this Json array. The length of array will be the number of "units" in this Json object.
So I need to extract "units" and add some data from parent objects.
units: [{
domain: "",
type: "",
key: ""
}, {
domain: "",
type: "",
key: ""
},
{
domain: "",
type: "",
key: ""
}
....
];
I guess i can probably do something like this:
var res = [];
myjson.forEach(function(row) {
row.files.forEach(function(tfile) {
tfile.units.forEach(function(unit) {
var testEntity = {
domain: tfile.domain,
type : unit.type,
key: unit.key
};
res.push(testEntity);
});
});
});
But it is difficult to read and looks not so good. I was thinking to do something like :
var RESULT = myjson.map(function(row) {
return row.files.map(function(tfile) {
return tfile.units.map(function(unit) {
return {
domain: tfile.domain,
type : unit.type,
key: unit.key
};
});
});
});
But This doesn't work and looks not better . Is there any way to do so it works, maybe in more declarative way. hoped Ramda.js could help.
It there any good approach in general to get data from any Nested json in readable way?
Implementing something like:
nestedjson.findAllOnLastlevel(function(item){
return {
key : item.key,
type: type.key,
domain : item.parent.domain}
});
Or somehow flatten this json so all properties from all parents object are moved to leafs children. myjson.flatten("files.units")
jsbin http://jsbin.com/hiqatutino/edit?css,js,console
Many thanks
The function you can use here is Ramda's R.chain function rather than R.map. You can think of R.chain as a way of mapping over a list with a function that returns another list and then flattens the resulting list of lists together.
// get a list of all files
const listOfFiles =
R.chain(R.prop('files'), myjson)
// a function that we can use to add the domain to each unit
const unitsWithDomain =
(domain, units) => R.map(R.assoc('domain', domain), units)
// take the list of files and add the domain to each of its units
const result =
R.chain(file => unitsWithDomain(file.domain, file.units), listOfFiles)
If you wanted to take it a step further then you could also use R.pipeK which helps with composing functions together which behave like R.chain between each of the given functions.
// this creates a function that accepts the `myjson` list
// then passes the list of files to the second function
// returning the list of units for each file with the domain attached
const process = pipeK(prop('files'),
f => map(assoc('domain', f.domain), f.units))
// giving the `myjson` object produces the same result as above
process(myjson)
Pure JS is very sufficient to produce the result in simple one liners. I wouldn't touch any library just for this job. I have two ways to do it here. First one is a chain of reduce.reduce.map and second one is a chain of reduce.map.map. Here is the code;
var myjson = [{"files":[{"domain":"d","units":[{"key":"key1","type":"2"},{"key":"key2","type":"2"},{"key":"key3","type":"2"}]},{"domain":"d1","units":[{"key":"key11","type":"2"},{"key":"key12","type":"2"},{"key":"key13","type":"2"}]}]},{"files":[{"domain":"e","units":[{"key":"key1","type":"2"},{"key":"key2","type":"2"},{"key":"key3","type":"2"}]},{"domain":"e1","units":[{"key":"key11","type":"2"},{"key":"key12","type":"2"},{"key":"key13","type":"2"}]}]}],
units = myjson.reduce((p,c) => c.files.reduce((f,s) => f.concat(s.units.map(e => (e.domain = s.domain,e))) ,p) ,[]);
units2 = myjson.reduce((p,c) => p.concat(...c.files.map(f => f.units.map(e => (e.domain = f.domain,e)))) ,[]);
console.log(units);
console.log(units2);
For ES5 compatibility i would suggest the reduce.reduce.map chain since there is no need for a spread operator. And replace the arrow functions with their conventional counterparts like the one below;
var myjson = [{"files":[{"domain":"d","units":[{"key":"key1","type":"2"},{"key":"key2","type":"2"},{"key":"key3","type":"2"}]},{"domain":"d1","units":[{"key":"key11","type":"2"},{"key":"key12","type":"2"},{"key":"key13","type":"2"}]}]},{"files":[{"domain":"e","units":[{"key":"key1","type":"2"},{"key":"key2","type":"2"},{"key":"key3","type":"2"}]},{"domain":"e1","units":[{"key":"key11","type":"2"},{"key":"key12","type":"2"},{"key":"key13","type":"2"}]}]}],
units = myjson.reduce(function(p,c) {
return c.files.reduce(function(f,s) {
return f.concat(s.units.map(function(e){
e.domain = s.domain;
return e;
}));
},p);
},[]);
console.log(units);
Something like this should work. .reduce is a good one for these kind of situations.
const allUnits = myjson.reduce((acc, anonObj) => {
const units = anonObj.files.map(fileObj => {
return fileObj.units.map(unit => {
return {...unit, domain: fileObj.domain})
})
return [...acc, ...units]
}, [])
Note that this relies on both array spreading and object spreading, which are ES6 features not supported by every platform.
If you can't use ES6, here is an ES5 implementation. Not as pretty, but does the same thing:
var allUnits = myjson.reduce(function (acc, anonObj) {
const units = anonObj.files.map(function(fileObj) {
// for each fileObject, return an array of processed unit objects
// with domain property added from fileObj
return fileObj.units.map(function(unit) {
return {
key: unit.key,
type: unit.type,
domain: fileObj.domain
}
})
})
// for each file array, add unit objects from that array to accumulator array
return acc.concat(units)
}, [])
Try this
var myjson = [{
"files": [{
"domain": "d",
"units": [{
"key": "key1",
"type": "2"
}, {
"key": "key2",
"type": "2"
}, {
"key": "key3",
"type": "2"
}]
},
{
"domain": "d1",
"units": [{
"key": "key11",
"type": "2"
}, {
"key": "key12",
"type": "2"
}, {
"key": "key13",
"type": "2"
}]
}
]
}];
//first filter out properties exluding units
var result = [];
myjson.forEach(function(obj){
obj.files.forEach(function(obj2){
result = result.concat(obj2.units.map(function(unit){
unit.domain = obj2.domain;
return unit;
}));
});
});
console.log(result);