An array of dynamic JavaScript objects for joining and filtering

I'm currently facing a rather intricate scenario: I have 3 arrays in JavaScript as depicted below. The values in the Values array keep changing every 5 seconds to either true or false.

var Config = [{
    "rdd": "Transducer Failure",
    "performance": true,
    "agc": false,
    "snr": true,
    "sos": false,
    "flowvel": true
  },
  {
    "rdd": "Detection Problem",
    "performance": false,
    "agc": true,
    "snr": false,
    "sos": true,
    "flowvel": false
  }
]

The Config array contains configurations for all instances that are applicable for their respective rdd. For instance, "Transducer Failure" will have performance, snr, and flowvel but not all other fields will be applicable such as agc and sos.

var Instance = [{
  "U": [{
    "performance": "abc",
    "agc": "xyz",
    "snr": "pqr",
    "sos": "vns",
    "flowvel": "mns"
  }],
  "Y": [{
    "performance": "a",
    "agc": "b",
    "snr": "c",
    "sos": "d",
    "flowvel": "e"
  }]
}]

The Instances array consists of instances with configuration from the Config array:

var Values = [{
  "abc": true,
  "xyz": false,
  "pqr": true,
  "vns": false,
  "mns": true,
  "a": true,
  "b": false,
  "c": false,
  "d": true,
  "e": true
}]

Values hold the corresponding values for each instance.

I am aiming to create a new object array that satisfies the following conditions:

  1. If the value in Config is true; for example, if performance or snr in the config array is true, then it corresponds to the respective value in the Instance array (e.g., if performance is true, it maps to "abc" in the Instance array and if performance is false, it returns NA).

  2. The key's value in the Config array will match the value of the corresponding key in the Values array. For example, if performance is true, it corresponds to the instance 'abc' and if the value of "abc" is true, the value of performance will be either true or false. Additionally, if the value of performance in the Config itself is false, it will return "NA".

Expected output:

result = [{
  "U": [{
      "rdd": "Transducer Failure",
      "performance": true,
      "agc": "NA",
      "snr": true,
      "sos": "NA",
      "flowvel": true
    },
    {
      "rdd": "Detection Problem",
      "performance": "NA",
      "agc": false,
      "snr": "NA",
      "sos": false,
      "flowvel": "NA"
    }
  ],
  "Y": [{
      "rdd": "Transducer Failure",
      "performance": true,
      "agc": "NA",
      "snr": false,
      "sos": "NA",
      "flowvel": true
    },
    {
      "rdd": "Detection Problem",
      "performance": "NA",
      "agc": false,
      "snr": "NA",
      "sos": true,
      "flowvel": "NA"
    }
  ]
}]

Answer №1

My solution involves using Object.keys to extract key names and employing array notation to assign dynamic names in the resulting object key. Additionally, I utilized Object.assign to ensure that only one object is present in the final result, which is stored in the variable resultArray.

var Config = [
    {
        "rdd": "Transducer Failure",
        "performance": true,
        "agc": false,
        "snr": true,
        "sos": false,
        "flowvel": true
    },
    {
        "rdd": "Detection Problem",
        "performance": false,
        "agc": true,
        "snr": false,
        "sos": true,
        "flowvel": false
    }
]

var Instance = [{
    "U": [{
        "performance": "abc",
        "agc": "xyz",
        "snr": "pqr",
        "sos": "vns",
        "flowvel": "mns"
    }],
    "Y": [{
        "performance": "a",
        "agc": "b",
        "snr": "c",
        "sos": "d",
        "flowvel": "e"
    }]
}]

var Values = [{
    "abc": true,
    "xyz": false,
    "pqr": true,
    "vns": false,
    "mns": true,
    "a": true,
    "b": false,
    "c": false,
    "d": true,
    "e": true
}]


function getResult(Instance, config, v) {
    let resultArray = [];
    for (let i = 0; i < Instance.length; i++) {
        const resultKeys = Object.keys(Instance[i])
        const element = Instance[i];
        let prev = null
        resultKeys.forEach((r, index) => {
            let reuslt = {
                [r]: config.map(c => {
                    const configKeys = Object.keys(c)
                    return {
                        [configKeys[0]]: c.rdd,
                        [configKeys[1]]: c[configKeys[1]] ? v[0][element[r][i][configKeys[1]]] : 'NA',
                        [configKeys[2]]: c[configKeys[2]] ? v[0][element[r][i][configKeys[2]]] : 'NA',
                        [configKeys[3]]: c[configKeys[3]] ? v[0][element[r][i][configKeys[3]]] : 'NA',
                        [configKeys[4]]: c[configKeys[4]] ? v[0][element[r][i][configKeys[4]]] : 'NA',
                        [configKeys[5]]: c[configKeys[5]] ? v[0][element[r][i][configKeys[5]]] : 'NA'
                    }
                })
            }
            if (index === 0) {
                prev = reuslt
            }
            else {
                Object.assign(prev, reuslt)
            }
        })
        resultArray.push(prev)
    }
    console.log(resultArray)
}
getResult(Instance, Config, Values)

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

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...

Issues with jQuery custom accordion functionality in Internet Explorer, Safari, and Chrome browsers

When a corresponding <a> is clicked, my script should expand/collapse UL elements. It works perfectly in Firefox and you can check it out here. First, I load the jQuery library and then my own examples.js file which includes: function initExamples( ...

Different ways to attach or cycle through various background images with text

I have a collection of images stored in a folder, and I am looking to randomly select one of the images to display as a full background image while also showing the text description related to that specific image. Here is the code snippet for achieving t ...

Tips for simulating an axios request that returns an image buffer

I am attempting to simulate an axios api call that returns an image buffer as shown below: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff e1 00 de 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 06 00 12 01 03 00 01 00 00 00 01 00 ... ...

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

I am in need of creating two marquees for a website project. The first marquee should showcase a repeating image while the second one should display links, both spanning the browser window at any size. It is crucial that the marquee items are displayed fro ...

What are some ways to disable text selection when working with VueJS?

Let's say I have a component that displays some text. When I click on the text at the beginning and then shift-click on another part, the text between those two points gets selected. Is there a way to prevent this behavior using only VueJS? ...

utilizing services across multiple controller files

Service - optionService.js controllers - app.js & welcomeCtrl.js & otherCtrl.js app.js var app = angular.module('mainapp', ['mainapp.welcome','optionServiceModule']); app.controller('mainappCtrl', functio ...

Attempting to retrieve JSON data from an online API

I am attempting to retrieve the JSON data from the following URL: However, every time I try, I encounter an error message like this: XMLHttpRequest cannot load http://status.mojang.com/check. Origin null is not allowed by Access-Control-Allow-Origin. A ...

Fading effect of Bootstrap JS on reducing content size

My quest for a toggle collapse button led me to this helpful link: https://getbootstrap.com/docs/4.0/components/collapse/ I found what I needed, but encountered an issue with the transition; clicking on the button immediately reveals my div. I desire a slo ...

Larger figure on the left side

When provided with an array of numbers, the task is to print the first number on the left side that is greater than the current number for each number in the array. To better illustrate this: Input -> 5,3,2,4,8,6 Output-> -1, 5, ...

-g option must be enabled for jscoverage to function properly

To install jscoverage globally, use the following command: npm install jscoverage -g Do you know what purpose the -g option serves? Without using the -g option, my system does not recognize jscoverage as a valid command. ...

Replace every item in the array with the corresponding value from the output and add a line break

I need help creating a flow in PowerAutomate that will go through each value in an array and insert a linebreak after each value found in the output. For example, if I have an array [1, 2, 3] and the input is "Hello 1 nice 2 see you 3 today," I want the ou ...

Ways to access a conditional rendered ref element in Vue using v-if

I have a specific element that is conditionally rendered using v-if="isLogged" when a user is logged in: <div v-if="isLogged" class="chatBlock" ref="chat" ></div> The issue I'm facing is trying to retrieve the scroll height of the ...

Exploring the parent of an HTML element / Finding a child element with unique content

Struggling with a challenge from frontendmentor that involves JavaScript. I need help on making the script detect if a P tag contains 0 as its content and then applying a different style to the containing div. <section class="pledge-box sub-section ...

When transferring files using formData via axios, the server is unable to interpret the data

`` In my quest to figure out how to send a file from a client using an input type=file to an API, I came across the suggestion to use formData. Following some examples I found, I implemented this approach, but upon checking the data on the server side, it ...

Removing an active image from a bootstrap carousel: A step-by-step guide

Within my bootstrap carousel, I have added two buttons - one for uploading an image and the other for deleting the currently displayed image. However, I am unsure how to delete the active element. Can someone provide assistance with the code for this but ...

AngularJS: The $sce.trustAsHtml function allows code to be displayed as text

I have a JSON array that returns data, with one element containing actual HTML code. However, when I use it in ng-repeat, I encounter an issue. Here is the structure of the JSON: [ { "id": "43", "name": "Name", "html": "&lt;div style=& ...

Retrieving server information using AJAX in React

I've been attempting to utilize an AJAX call in order to fetch server data for my React Components. However, I'm encountering difficulties when it comes to displaying it with React as I keep receiving this error: Uncaught TypeError: Cannot read ...

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

Encountering difficulties displaying page numbers when printing multiple multipage reports Here is the provided HTML Format : <style type="text/css> body { counter-reset: report 1 page 0; } td.footer:after { counter-increment: page; content ...

How come despite installing node 10.1.0, the system is showing the installed version as 5.6.0?

After I downloaded the NPM Windows installer from this link: https://nodejs.org/it/, I made sure to download and install the 10.1.0 version. However, when I checked my console using the command node -v, I was surprised by the following output: C:\U ...