Building an array instead of hardcoding it

Question

How do I make a loop that will create the INITIAL_MAP array instead of hardcoding it?

const INITIAL_MTL = new THREE.MeshPhongMaterial({ color: 0xC0C0C0, shininess: 10 });

const INITIAL_MAP = [
{ childID: "part-001", mtl: INITIAL_MTL },
{ childID: "part-002", mtl: INITIAL_MTL },
{ childID: "part-003", mtl: INITIAL_MTL },
{ childID: "part-004", mtl: INITIAL_MTL },
{ childID: "part-005", mtl: INITIAL_MTL },
{ childID: "part-006", mtl: INITIAL_MTL },
{ childID: "part-007", mtl: INITIAL_MTL },
{ childID: "part-008", mtl: INITIAL_MTL },
{ childID: "part-009", mtl: INITIAL_MTL },
{ childID: "part-010", mtl: INITIAL_MTL },
];

It could be called an object array and you can loop it using for, for..of forEach and other loop constructions — mplungjan, Dec 14 '21 at 11:59
SO object array. Thanks. But is it one or two dimensional ? iam not sure because of childID and mtl. — ExoGeniA, Dec 14 '21 at 12:01
This is a one-dimensional array but what do you mean "create a loop" out of it? Do you mean to iterate over it? — Smytt, Dec 14 '21 at 12:02
In order for an array to be 2-dimentional it has to be an arrays of arrays. Like: [[],[],[]]. you have [{},{},{}] which is just an array of objects — Smytt, Dec 14 '21 at 12:03
It's notable, that in JavaScript there's no multidimensional arrays. You can emulate a multidimensional array with nested arrays, though. — Teemu, Dec 14 '21 at 12:10
I changed your question to reflect what you are actually asking — mplungjan, Dec 14 '21 at 12:22

mplungjan · Accepted Answer · 2021-12-14T13:27:08.610

2

Using the for loop to push to the array

const INITIAL_MTL = new THREE.MeshPhongMaterial({ color: 0xC0C0C0, shininess: 10 });

const INITIAL_MAP = []
for (let i=1; i<=10;i++) INITIAL_MAP.push({
    childID: `part-${String(i).padStart(3, '0')}`, // padding the number
    mtl: INITIAL_MTL // storing the object from above
  })

console.log(INITIAL_MAP)

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Here is another way using Array.from to get an array to map

const INITIAL_MTL = new THREE.MeshPhongMaterial({ color: 0xC0C0C0, shininess: 10 });

const INITIAL_MAP = Array
  .from({ length: 10 }) // create an array with 10 elements
  .map((_, i) => ({     // the i goes from 0-9
    childID: `part-${String(i+1).padStart(3, '0')}`, // padding the number+1
    mtl: INITIAL_MTL    // storing the object from above
  }))

console.log(INITIAL_MAP)

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

UPDATE with your part color

const PART_COLOR = [true, false, true, false, false, false, true, false, false, false];
const INITIAL_MAP = []
for (let i = 1; i <= parts; i++) INITIAL_MAP.push(
  { childID: `part-${String(i).padStart(3, '0')}`, // padding the number 
    mtl: PART_COLOR[i] ? INITIAL_MTL : ARICON_COLOR })
}

edited Dec 14 '21 at 13:27

answered Dec 14 '21 at 12:17

mplungjan

169,008
28
173
236

1

Thank you ! That was want i was looking for ! Works like a charm ! – ExoGeniA Dec 14 '21 at 12:33
@ExoGeniA Do you want to change the shininess from 1 to 10 too? – mplungjan Dec 14 '21 at 12:34
what do you mean ? changing the shininess in the loop? nope thank you! Dont need that, but iam looking for a way to change the color of mtl: INITIAL_MTL in the loop. Like a second array with part-001=true, part-002=false, part-003=true. if true use blue, else default color... So i need some kind of if condition in the loop. – ExoGeniA Dec 14 '21 at 12:54
1

tell me and I will fix it. You can use ternary or you eventually need to wrap the statements in `{ let something = something; return { something: bla }}` instead of the one liner I have now – mplungjan Dec 14 '21 at 12:55
Tried this, but this dont work. ``const PART_COLOR = [ { color: true}, { color: false }, { color: true }, { color: false }, { color: false }, { color: false }, { color: true }, { color: false }, { color: false }, { color: false }]; const INITIAL_MAP = [] for (let i=1; i<=parts;i++) INITIAL_MAP.push({ childID: `part-${String(i).padStart(3, '0')}`, // padding the number { let PART_COLOR[i]['color'] = true; return { mtl: INITIAL_MTL }} { let PART_COLOR[i]['color'] = false; return { mtl: ARICON_COLOR }} })`` – ExoGeniA Dec 14 '21 at 13:22
The first array is new for true and false values and the other part is your code just tried to add the { let something = something; return { something: bla }} part. but iam doing it wrong – ExoGeniA Dec 14 '21 at 13:26
1

See update at the bottom – mplungjan Dec 14 '21 at 13:27
1

Thank you a lot ! You are the man ! You helped me out ! Thanks again ! Everything works perfectly. – ExoGeniA Dec 14 '21 at 13:45

Building an array instead of hardcoding it

1 Answers1