Reputation: 31
I am creating an array of images that will be tagged for sorting using buttons, I understand that the array is being converted into a string(?) and that is why the commas after each set of tags is showing up on the final item (The "}," at the end of each array item). I've included my code to turn that pulls the array into my "<div id="app"></div>
" on the page. Is there an alternative here?
I understand this issue is stumping me because I have a fundamental lack of understanding of javascript, so I am not understanding the solutions I find online in a way that does not break everything I have setup so far, and I'm on a deadline here - and this code works with the rest of my code for this webpage that does a bunch of other stuff, and I lack the understanding to integrate this tag system in with the rest of the code when I use the solutions I've managed to find online.
const imgArr = [{
src: "https://www.w3schools.com/how-spaces-works3.png",
MultiFamily: 1,
Retail: 1,
Hospitality: 1,
Educational: 1,
Industrial: 1,
Office: 1,
Sporting: 1,
Region: 1,
WindowWall: 1,
CurtainWall: 1,
CassetteWall: 1,
Storefront: 1,
Windows: 1,
RevolvingDoor: 1,
FoldingWalls: 1,
TerraceDoors: 1,
SlidingDoors: 1,
AllGlass: 1,
Sunshades: 1,
GlassRailings: 1
},
{
src: "https://www.w3schools.com/how-spaces-works3.png",
MultiFamily: 0,
Retail: 1,
Hospitality: 1,
Educational: 1,
Industrial: 1,
Office: 1,
Sporting: 1,
Region: 1,
WindowWall: 1,
CurtainWall: 1,
CassetteWall: 1,
Storefront: 1,
Windows: 1,
RevolvingDoor: 1,
FoldingWalls: 1,
TerraceDoors: 1,
SlidingDoors: 1,
AllGlass: 1,
Sunshades: 1,
GlassRailings: 1
},
{
src: "https://www.w3schools.com/how-spaces-works3.png",
MultiFamily: 0,
Retail: 1,
Hospitality: 1,
Educational: 1,
Industrial: 1,
Office: 1,
Sporting: 1,
Region: 1,
WindowWall: 1,
CurtainWall: 1,
CassetteWall: 1,
Storefront: 1,
Windows: 1,
RevolvingDoor: 1,
FoldingWalls: 1,
TerraceDoors: 1,
SlidingDoors: 1,
AllGlass: 1,
Sunshades: 1,
GlassRailings: 1
},
{
src: "https://www.w3schools.com/how-spaces-works3.png",
MultiFamily: 1,
Retail: 1,
Hospitality: 1,
Educational: 1,
Industrial: 1,
Office: 1,
Sporting: 1,
Region: 1,
WindowWall: 1,
CurtainWall: 1,
CassetteWall: 1,
Storefront: 1,
Windows: 1,
RevolvingDoor: 1,
FoldingWalls: 1,
TerraceDoors: 1,
SlidingDoors: 1,
AllGlass: 0,
Sunshades: 1,
GlassRailings: 1
}
];
/* Gemeric function to display array content on screen */
const init = (ar) => ar.map(el => {
return `<div class="MasonryImagesDiv"><img class="MasonryImage" alt="FillerImage" src=${
el.src
}>
<div>MultiFamily: ${el.MultiFamily}<br>
AllGlass: ${el.AllGlass}
</div>`;
});
const sortByAllGlass = (a, b) => {
if (a.AllGlass === b.AllGlass) {
return 0;
}
return a.AllGlass > b.AllGlass ? 1 : -1;
};
/* MultiFamily Sorter low to high */
const sortByMultiFamily = (a, b) => {
if (a.MultiFamily === b.MultiFamily) {
return 0;
}
return a.MultiFamily > b.MultiFamily ? 1 : -1;
};
/* Generate array sorted by ascending numbers */
const function1 = () => {
document.getElementById("app").innerHTML = init([...imgArr].sort(sortByAllGlass));
}
const function2 = () => {
document.getElementById("app").innerHTML = init([...imgArr].sort(sortByMultiFamily));
}
document.getElementById("app").innerHTML = init(imgArr);
Upvotes: 3
Views: 55
Reputation: 2604
as @Octavian stated you are missing the doubleQuote (") around the src attribute. Also since array.map always returns an array, using the array.entries might get you there better.
const imgArr = [{
src: "https://via.placeholder.com/150/0000FF/808080?text=Image1",
MultiFamily: 1,
Retail: 1,
Hospitality: 1,
Educational: 1,
Industrial: 1,
Office: 1,
Sporting: 1,
Region: 1,
WindowWall: 1,
CurtainWall: 1,
CassetteWall: 1,
Storefront: 1,
Windows: 1,
RevolvingDoor: 1,
FoldingWalls: 1,
TerraceDoors: 1,
SlidingDoors: 1,
AllGlass: 1,
Sunshades: 1,
GlassRailings: 1
},
{
src: "https://via.placeholder.com/150/FF0000/FFFFFF?text=Image2",
MultiFamily: 0,
Retail: 1,
Hospitality: 1,
Educational: 1,
Industrial: 1,
Office: 1,
Sporting: 1,
Region: 1,
WindowWall: 1,
CurtainWall: 1,
CassetteWall: 1,
Storefront: 1,
Windows: 1,
RevolvingDoor: 1,
FoldingWalls: 1,
TerraceDoors: 1,
SlidingDoors: 1,
AllGlass: 1,
Sunshades: 1,
GlassRailings: 1
},
{
src: "https://via.placeholder.com/150/FFFF00/000000?text=Image3",
MultiFamily: 0,
Retail: 1,
Hospitality: 1,
Educational: 1,
Industrial: 1,
Office: 1,
Sporting: 1,
Region: 1,
WindowWall: 1,
CurtainWall: 1,
CassetteWall: 1,
Storefront: 1,
Windows: 1,
RevolvingDoor: 1,
FoldingWalls: 1,
TerraceDoors: 1,
SlidingDoors: 1,
AllGlass: 1,
Sunshades: 1,
GlassRailings: 1
},
{
src: "https://via.placeholder.com/150/000000/FFFFFF/?text=Image4",
MultiFamily: 1,
Retail: 1,
Hospitality: 1,
Educational: 1,
Industrial: 1,
Office: 1,
Sporting: 1,
Region: 1,
WindowWall: 1,
CurtainWall: 1,
CassetteWall: 1,
Storefront: 1,
Windows: 1,
RevolvingDoor: 1,
FoldingWalls: 1,
TerraceDoors: 1,
SlidingDoors: 1,
AllGlass: 0,
Sunshades: 1,
GlassRailings: 1
}
];
const init = (ar) => {
let $output = ''; // initialize an empty string
for (const [index, el] of ar.entries()) {
//append our template for each array item
$output += `
<div class="MasonryImagesDiv">
<img class="MasonryImage" alt="FillerImage" src="${el.src}">
<div>MultiFamily: ${el.MultiFamily}<br>
AllGlass: ${el.AllGlass}
</div>
</div>`;
}
return $output; // return the final string
}
document.getElementById("app").innerHTML = init(imgArr);
<div id="app"></div>
Upvotes: 1