0

I need to view different array indexes and their values inside my template. I have this object:

vegetables = [
    {name: 'Carrot', type: 'vegetable'},
    {name: 'Onion', type: 'vegetable'},
    {name: 'Potato', type: 'vegetable'},
    {name: 'Capsicum', type: 'vegetable'}],
    [
      {name: 'Carrotas', type: 'vegetable'},
      {name: 'Onionas', type: 'vegetable'},
      {name: 'Potatoas', type: 'vegetable'},
      {name: 'Capsicumas', type: 'vegetable'}]

And I do this:

 <li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let items of [vegetables[0]]"
                        [dragClass]="'active'" [dragTransitClass]="'active'" [dragData]="item" [dragScope]="item.type" [dragEnabled]="dragEnabled">
                        {{item.name}}
                    </li>

But [vegetables[0]] only outputs "Carrot" from the list and that's it. Instead I need it to output first array and all its content, then on the second iteration, output second array with "Carrotas", "Onionas" etc. How do achieve this?

0 will be replaced with i which will be incremented every time to go through different arrays of lists inside vegetables.

Limpuls
  • 856
  • 1
  • 19
  • 37

1 Answers1

3

First of all, array you provided is wrong. I'm assuming it will be like this:

vegetables = [[
{name: 'Carrot', type: 'vegetable'},
{name: 'Onion', type: 'vegetable'},
{name: 'Potato', type: 'vegetable'},
{name: 'Capsicum', type: 'vegetable'}],
[
  {name: 'Carrotas', type: 'vegetable'},
  {name: 'Onionas', type: 'vegetable'},
  {name: 'Potatoas', type: 'vegetable'},
  {name: 'Capsicumas', type: 'vegetable'}]]

If I understood correctly, either you'll have to write with *ngIf for indexes (e.g. check if index is odd or even), or reduce them to be a single one. e.g:

const vegetablesReduced = vegetables.reduce((r, x) => [...r, ...x], []);

This will create array like:

vegetablesReduced = [
  {name: 'Carrot', type: 'vegetable'},
  ...
  {name: 'Carrotas', type: 'vegetable'},
  ...
];

EDIT: Ah.. I only see that your problem lays in array definition only. The way you have array created there is false, since you're creating only first one and second is ignored (javascript...). Try to change array as I provided and see if it works.

EDIT2: It should be 2D array, while you have only 1D (and also with mistake, since 1D arrays can't be split into multi arrays) What you're missing is only to wrap that whole thing into another array and it will work.

Nika
  • 1,864
  • 3
  • 23
  • 44
  • Yes, this is works, thank you. I need to educate myself more on js arrays and all that. Now I can get `Carrot` with this line of code `[vegetables[0][0]]`. Now I just need to figure out how to nest ngFor loops and bind it to `[draggable]` directive to printout all vegetable names inside 0 array and then inside 1st array, so on.. – Limpuls Dec 02 '18 at 15:58
  • I think you have to use something like `*ngFor="let item of vegetables[INDEX]"` which will return all the vegetables from INDEX row. So `item` becomes what you're expecting. – Nika Dec 02 '18 at 16:08
  • Just as a comment, the `reduce` can be like this also: `const vegetablesReduced = vegetables.reduce((r, x) => r.concat([...x]), []);` and you get the same result. – robe007 Dec 03 '18 at 03:08
  • 1
    yup. that's faster variant. or you can use even faster: `r.concat(x)` – Nika Dec 03 '18 at 15:27