Handlebars - getting value of array with an index-number from another object / arrA[object.num].value

Question

EDIT

Thanx to 76484!

I have added some more here to make the question clearer.

I want to access "handlungsstrang[karte[x].strang].farbe" in my handlebars and change the background color of a div.

Each "Karte" (1 - x) of a "handlungsstrang" (1,2,3) should have the same color.

I render the webpage with:

   res.render("index", {
      myDoc: myInit.myDoc,
    });

myDoc (from a file.json - looks like this (shortened):

{
  "projektTitel": "Plotter Test",
  "filename": "editDoc.json",
<….>
  "dramturgiefarbe": "#00FFFF",
  "handlungsstrang": [
    {"name": "A-Strang", "beschreibung": "Heldin ermittelt den Mörder", "farbe": "#34C534", "initProzent": 50, "symbol": "A", "rausgeschoben": "false"},
    {"name": "B-Strang", "beschreibung": "Heldin ermittelt den Mörder", "farbe": "#666666", "initProzent": 30, "symbol": "B", "rausgeschoben": "false"}
  ],
  "minidisplay": {
    "sichtbar": true
    },
  "karte": [ {
      "uuid": "0",
      "farbe": "#34C534",
      "strang": 0,
      "band": 1,
      "isAnmerkungsKarte": 0
    },
    {
      "uuid": "2",
      "farbe": "#CEE960",
      "strang": 1,
      "band": 1,
      "isAnmerkungsKarte": 0
    }
    {
      "uuid": "3",
      "farbe": "#CEE960",
      "strang": 3,
      "band": 1,
      "isAnmerkungsKarte": 0
    }
  ]  
}

THIS WORKS in the fiddle - THANX 76484!

    {{#each karte}}
    {{lookup (lookup ../handlungsstrang strang) 'farbe'}}
    {{/each}}

And this NOT on my site:

<div class="papierkorbbereich">

    {{#each myDoc.karte}}
    {{@index}}
    >{{lookup (lookup ../handlungsstrang strang) 'farbe'}}<
     
    {{/each}}
</div>

Result: 1><2><3>< …

It is exasperating. What am I doing wrong...?

SOLUTION

I've included the solution here in case someone is looking for it and wants to get a quick answer. Here is what worked for me:

handlungsstrang[ karte[x].strang].farbe // with Handlebars: => {{lookup (lookup @root/myDoc/handlungsstrang strang) 'farbe'}}

{{#each myDoc.karte}}
    {{lookup (lookup @root/myDoc/handlungsstrang strang) 'farbe'}}
    {{/each}}

I think this answer addresses your problem: stackoverflow.com/a/65256176/3397771. This may also help: stackoverflow.com/a/39311276/3397771 — 76484
– 76484, Commented Feb 3, 2021 at 15:14
Hi! Thank you very much! But I don't think the two references will get me anywhere. There a keyword is searched in the object by lookup. But I have to pass a number and search for an array entry. Or do I see something wrong? In the {{#each}} - loop I get also from the helper function only errors back and no more values. For example, if I fetch the value directly: var a = array[value].color; return a; => error — marlowe
– marlowe, Commented Feb 3, 2021 at 19:07

76484 · Accepted Answer · 2021-02-03 19:41:45Z

0

It makes it more challenging to help you because you haven't formatted the code in your example (your Handlebars template doesn't even contain any handlebars, {}!).

However, as I alluded to in my comment, you should be using the lookup helper in order to lookup values on an object.

Your use-case will require two lookups: first to lookup the item from the Strang array based on the index provided at each Card's strangNo (presumably). Secondly, you will need to lookup the color property on the returned Strang. Handlebars allows you to nest lookup using subexpressions.

Your template becomes:

{{#each Card}}
    {{lookup (lookup ../Strang strangNo) 'color'}}
{{/each}}

No helper required.

I have created a fiddle for your reference.

answered Feb 3, 2021 at 19:41

76484

9,0013 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

marlowe Over a year ago

WOW! Thank you very much, 76484! It's really great how much work you do to help me. Thank you. Thanks for the fiddle... And there it gets kinda weird. i filled the fiddle once with my original objects and adapted your "each lookup" loop. In the fiddle IT WORKS! - but not on my website. Nothing appears there ... ;-( {{!-- Papierkorb --}} <div class="papierkorbbereich"> {{#each myDoc.karte}} {{@index}} >{{lookup (lookup ../handlungsstrang strang) 'farbe'}}< {{/each}} </div> result: 1><2><3>< …

76484 Over a year ago

@marlowe: I can't know what the problem is without seeing the data you are passing to your template.

marlowe Over a year ago

i've add the data and more infos above in my question. I'm a newby on stackoverflow. Sorry if I'm doing something wrong. It's still all a bit strange here on the portal.

76484 Over a year ago

@marlowe: Your myDoc.karte part is changing the context. I think you should use @root as in @root/myDoc/handlungsstrang. See: jsfiddle.net/76484/rxvbjo4z

marlowe Over a year ago

HA!!!! You are absolutely brilliant! THANK YOU! The @root has made the breakthrough. IT WORKS! Thank you so much for your efforts and time! I couldn't have done this on my own. Thank you.

Collectives™ on Stack Overflow

Handlebars - getting value of array with an index-number from another object / arrA[object.num].value

SOLUTION

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

SOLUTION

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related