Utilizing the Value of an Array as a Key in a Different Array

Can someone help me with reading data from two arrays? The first array looks like this:

tnails: [
    {
      mil: '/static/mini/t-icon-mil.png',
      mar: '/static/mini/t-icon-mar.png',
      brd: '/static/mini/t-icon-brd.png',
      prs: '/static/mini/t-icon-prs.png',
      pol: '/static/mini/t-icon-pol.png',
      fbr: '/static/mini/t-icon-fbr.png'
    }
  ],

and the second one is as follows:

this.headers = [
        {
          mil: 'Entry No. 1',
          mar: 'Entry No. 2',
          brd: 'Entry No. 3',
          prs: 'Entry No. 4',
          pol: 'Entry No. 5',
          fbr: 'Entry No. 6'
        }
      ]

I am trying to match values from headers based on keys extracted from tnails:

tn.substring(20, 23)

This gives me keys like mil, mar, etc.

The current code structure is like this:

      <v-layout v-for="t in tnails" :key="t.id">
        <v-flex v-for="tn in t" :key="tn.id">
          <v-tooltip>
            <img :src="tn" slot="activator">
            <span>{{ headers (???) tn.substring(20, 23) }}</span>
          </v-tooltip>
        </v-flex>
      </v-layout>

Any suggestions on how I can merge the data from these two arrays to display entries from headers?

Answer №1

To access a property of the headers object, you can utilize bracket notation with the parsed string as a key.

headers[index][tn.substring(20, 23)]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stylus remains undefined even after a successful npm installation

I've been following a tutorial to learn more about node.js, but I keep encountering a strange error. After running npm install stylus, I receive the following output: npm http GET https://registry.npmjs.org/stylus npm http 304 https://registry.npmjs. ...

Send a value to several PHP pages simultaneously using JQuery

I find myself asking this question due to my lack of experience. Is it possible to send a value to multiple PHP pages using JQuery? Let me illustrate what I am attempting to achieve. $(function() { $("#account").change(function() { $("#facilities" ...

What is the best way to remove empty elements from an Array?

Having an issue with my API post request. If no values are entered in the pricing form fields, I want to send an empty array. I attempted to use the filter method to achieve this but it still sends an array with an empty object (i.e. [{}]) when making the ...

Is there a more efficient method for converting an array of objects?

Is there a more efficient way to change just one value in an array without iterating through every element? I've included the code below where I am trying to update the contact number for each user in an array. Although my current solution works, it ...

convert a screenplay to javascript

I have a script that can be used to calculate the distance between 2 coordinates. The code is a combination of PHP and JavaScript. I am interested in moving it into a standalone JavaScript file but not sure how to proceed. Below is the script related to & ...

Angular routing does not properly update to the child's path

I've organized my project's file structure as follows: app/ (contains all automatically built files) app-routing.module.ts components/ layout/ top/ side/ banner/ pages/ ...

Absolute positioning causes an element's height to increase

As I delve into the realm of typographical animations and seek to calculate the baseline of a font at various sizes, I've stumbled upon a peculiar discovery: It appears that the height values of elements tend to increase in an erratic manner when thei ...

Comparing Express.js View Engine to Manual Compilation

Currently, I am utilizing Express.js along with the hbs library to incorporate Handlebars templates in my application. Lately, I've delved into establishing a build system using gulp for my app and stumbled upon packages like gulp-handlebars. My query ...

Step-by-step guide on displaying elements within an array of objects

Upon receiving an object from a website, I discovered that it includes an array of objects along with other parameters. When I use console.log(req.body.cart), the output is [ { title: 'iphone 6', cost: '650' } ], but I only require the ...

Angular Controller is not able to retrieve the Route Parameter, resulting in a 404

Currently working on my very first web app using Node.js and AngularJs. I've encountered a roadblock with the following code: var app = angular.module('Martin', ['ngResource','ngRoute']); app.config(['$routeProvide ...

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

I have noticed that all Premium posts contain an element with the class ="svgIcon-use" <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.090 123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 ...

What is the ideal timing to incorporate an error handler in an Observable?

I find myself uncertain about the best practices for error handling in general. For instance, if I'm already handling errors in my service using catchError, is it necessary to also include an error handler in my subscription? Here's an example o ...

Global asynchronous functionality can be enabled in JavaScript

Wouldn't it be convenient to have the option to enable async functionality in the global scope? This way, there would be no need to wrap all asynchronous operations within a function. I'm curious if this is achievable in browser JavaScript or per ...

When using multer to upload a file, the issue of req.files being undefined may

I am currently working on a Node.js Application using Express.js 4 that involves uploading an image. I opted to utilize the multer module for this task, but encountered an issue with accessing the uploaded file via req.files. Below is the relevant portions ...

How can one discern the most effective method to identify JavaScript code that alters particular HTML content on a webpage?

On my website, I have a <p> tag and I am interested in knowing which JavaScript function is responsible for adding text inside this element. Is there a special method in Chrome to add a listener on this tag and pinpoint the script that writes to it ...

Addressing Equity Concerns within JavaScript Programming

I can't figure out why the final line in this code snippet is returning false. Is it not identical to the line above? const Statuses = Object.freeze({ UNKNOWN : 0, OK : 1, ERROR : 2, STOPPED : 3 }); class myStatus extends Object{ co ...

What is the reason that property spreading is effective within Grid components but not in FormControl components?

Explore the sandbox environment here: https://codesandbox.io/s/agitated-ardinghelli-fnoj15?file=/src/temp4.tsx:0-1206. import { FormControl, FormControlProps, Grid, GridProps } from "@mui/material"; interface ICustomControlProps { gridProps?: ...

Sending an array of complex data to a controller method in ASP.net MVC

Currently, I am in the process of migrating an ASP.net Web Forms application to MVC. This application makes use of AJAX through an Ajax-enabled WCF Web service and asp:ScriptManager. I have been sending an array of objects to the service, and it has been ...

What is the best way to continuously make an ajax request in Angular.js and terminate it depending on the response received?

I am looking for advice on how to optimize my controller in order to run a periodic ajax call every 15 seconds instead of just once. Additionally, I am wondering how I can stop the call when needed. myApp.controller('myCntrl', function($window,$ ...

Delay the execution of the function in AngularJS until the browser has finished rendering completely and the view-model synchronization cycle has ended

I'm uncertain about the appropriate title for this inquiry, so please correct me if I am mistaken. Suppose that upon page refresh (load), I require an animated scroll to an anchor based on the current location's hash (I am aware of ngAnchorScrol ...