I'm trying to read all the values of an attribute my page an get, for each attribute (some attribute can has multiple value separate by comma) the div id This is my html page:
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(function(element) {
let v = element.getAttribute('data-att');
let id = element.id;
comma = v.includes(",");
if (comma) {
s = v.split(",");
s.forEach(function(single) {
obj[single] = {
id: id
};
});
} else {
obj[v] = {
id: id
};
}
});
console.log(obj);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>What's the problem?
At the moment i needed to assign the attrbute id using obj[single] = {id: id}; cause i tried to make a obj[single].push(id); but I get error
Anyone can hel me to reach this resoult:
{
"foo": {
['due','uno','tre','cinque']
},
"bar": {
['tre']
},
"brum": {
['cinque']
}
}
CodePudding user response：
I think this is what you need:
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(el => {
const keys = el.dataset.att.split(',');
keys.forEach(key => {
if(obj[key] === undefined){
obj[key] = [];
}
obj[key].push(el.id)
})
})
console.log(obj);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>The result is not the same you posted, i think you made a mistake there, or was it me?
CodePudding user response：
Check if the property already exists. If it does, push onto the array, otherwise create the array.
There's no need for if (comma). Splitting a string with no comma will return an array with a single element, you can loop over this with forEach().
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(function(element) {
let v = element.getAttribute('data-att');
let id = element.id;
s = v.split(",");
s.forEach(function(single) {
if (obj[single]) {
obj[single].push(id);
} else {
obj[single] = [id];
}
});
});
console.log(obj);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>