Question: I am a newbie to programming and web developing. The project I am doing is only for practice, if my approach seems ameteur to you, please suggest any better options.

I am trying to develop a parking lot booking system. And in the UI, I want to show all the empty/filled slots (like it is while booking movies or bus tickets). 

I couldn't find a top view icon of a car, so I thought of using an image instead of icon.

But as of the image, if I use say 50 images on a single page, the page will get very heavy.

But one important thing is that I need all the elements as seperate entities, only then I will be able to book them with their id(unique address). So I want 50 different divs with seperate distinct ids but want to use only one image for all the slots, or a maximum of 2 different images(keeping the directions in mind).

[how to display same image multiple times using same image in javascript](https://stackoverflow.com/questions/35366555/how-to-display-same-image-multiple-times-using-same-image-in-javascript)

I went through this answer, and found a piece of code that might be useful:

```
var imgSrc = 'http://lorempixel.com/100/100';

function generateImage() {
  var img = document.createElement('img')
  img.src = imgSrc;

  return img;
}

for (var i = 0; i < 20; i++ ) {
  document.body.appendChild(generateImage());
}

```

While I can make use of a function and a loop in javascript to create as many copies of one image, I don't know how to alot them to the different div tags with distinct ids.

Answer: 
You can use [`Array.prototype.flat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat):

> 
> The `flat()` method creates a new array with all sub-array elements concatenated into it recursively up to the specified ***depth***.
> 
> 
> 

**`depth | Optional`**

> 
> The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.
> 
> 
> 

```js
var response = {data: [{users: [1,2,3]}, {users: [4,5,6]}]}

var users = response.data.map(o => o.users).flat();

console.log(users);
```

You can also try with [`Array.prototype.flatMap()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap) which is ***identical to a `map` followed by a call to `flat` of depth 1***.

```
var users = response.data.flatMap(o => o.users);

```
You can use ES6 [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

```
var response = {data: [{users: [1,2,3]}, {users: [4,5,6]}]}    
var NEWARRAY = [];
for(var v of response.data){
  NEWARRAY.push(...v.users);
}
console.log(NEWARRAY);

```