Guide for setting a custom property value by referencing another property value within a nested array object in JavaScript

 let obj = {
    "data": [
    {
        id    : "a1",
        guid  : "sdfsfd",
        value : "abc",
        "status": "active"
      },
      {
        id    : "a2",
        guid  : "deaf",
        value : "def2",
       details : {
         "status": "inactive",
          "body": done
                  }
        "stat": "inactive"
      },
      {
        id    : "a2",
        guid  : "blind",
        value : "def4",
        details : {
           "status": "inactive",
           "body": donenot
                  }
        "stat": "inactive"
      },
    ]
      
    }
    
    console.log(obj.data.filter(item => item.stat === "inactive"))

RESULTS

 [{
  details: {
    body: "done",
    status: "inactive"
  },
  guid: "deaf",
  id: "a2",
  stat: "inactive",
  value: "deaf"
}, {
  details: {
    body: "donenot",
    status: "inactive"
  },
  guid: "blind",
  id: "a3",
  stat: "inactive",
  value: "blind"
}]

If I wish to ensure

  1. The value of each inactive entry (in these results) should be the same as their guid value...?
  2. The value of each inactive entry (in these results) should match the body within their respective details section...?
javascriptobject

Answer №1

To achieve the desired output, follow these steps:

  1. Update the data array by filtering out items with a stat value of "inactive" and mapping them to include a new key 'value' with the same value as 'guid'

Expected Output:

{
  data: [{
    details: {
      body: "done",
      status: "inactive"
    },
    guid: "deaf",
    id: "a2",
    stat: "inactive",
    value: "deaf"
  }, {
    details: {
      body: "done",
      status: "inactive"
    },
    guid: "blind", --> same as value
    id: "a3",
    stat: "inactive",
    value: "blind"
  }]
}

Then,

  1. Filter the data array based on items with stat value as "inactive" and update each item's 'details.status' to match 'details.body'

Expected New Output:

{
  data: [{
    details: {
      body: "done",
      status: "done"
    },
    guid: "deaf",
    id: "a2",
    stat: "inactive",
    value: "def2"
  }, {
    details: {
      body: "done",
      status: "done"
    },
    guid: "blind",
    id: "a3",
    stat: "inactive",
    value: "def4"
  }]
}

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

Redirect based on the geographical location of IP addresses (Geo-IP)

This code displays the page during execution and then initiates a redirect. Unfortunately, the redirection process is not as fast as desired. This application was created on blogspot.com <script> fetch('https://freegeoip.app/ ...

javascriptphpgeoip

Launch a YouTube video within a sleek and stylish Bootstrap modal popup

I am currently extracting video data from my SQL table. The fields in the table are as follows: - sidebar_video_id (auto increment) - sidebar_video_nev - sidebar_video_link (full URL) - sidebar_video_v_id (video ID at the end of the URL) What I'm tr ...

javascriptjquerytwitter-bootstrapvideoyoutube

Alter the design when hovering over a relevant element

How can I change hover styles for specific items in React? Currently, all item styles change at once when hovered. I want to only change the style of the selected div when hovering over the add to cart button. Visit this link import React, { useState } fr ...

javascriptreactjshoverdestructuringonmouseover

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet: class Todos extends React.Component{ construc ...

javascripthtmlcssreactjs

Identifying a problem in my code and having other errors acknowledged

The command window is displaying the following: C:\Users\Dell\Desktop\PROGRA~1>node revers~2.js events.js:160 throw er; // Unhandled 'error' event ^ Error: ENOENT: no such file or directory, open 'C:&bsol ...

javascript

Is there any way to ensure that this click occurs consistently and repeatedly?

I am trying to achieve a scenario where the '.child' image remains visible on the screen while the .parent div can be toggled between shown and hidden states. I have managed to make it appear once and disappear once, but I am struggling to make i ...

javascriptjqueryhtmlcss

Save instantly while modifying an element

I am exploring the idea of incorporating an automatic save feature using javascript/jQuery. In my project, I have multiple instances (hundreds) of elements with ids starting with `overlay-rotation-bounding-box`. For instance, `overlay-rotation-bounding-bo ...

javascriptjqueryajax

Troubleshooting problem with formatting and default value in MUI X DatePicker

I'm encountering a problem and struggling to find a solution. The default format for displaying dates in the MUI X DatePicker (with Material UI) is: Fri Oct dd yyyy HH:MM:SS GMT+HHMM (name of timezone here) However, I need to pass a date in the forma ...

javascriptreactjsmaterial-uimui-xmui-x-date-picker

The ultimate guide to removing a targeted form input using jquery

My HTML form contains two text inputs: <form id="insert_amount",onsubmit="submitAmount();return false;"> **input(type="text",placeholder="Your message",name="message")** **input(type="text",placeholder="Your amount",name="amount") ...

javascriptjqueryhtml

Live JSON sign-up feature on site

Is there a way to retrieve user email in real-time without using JSON? Currently, I am utilizing JSON for this purpose but it poses the risk of exposing emails that are stored in $resEmailsJson. Ideally, I would like to find a solution to hide all JSON $ ...

javascriptphpjsonajax

What is preventing the assignment of a class attribute inline using JavaScript?

<html> <head> <style> .tagging { border: 1px solid black; width: 20px; height: 30px; } </style> <script> window.onload = function() { var div = document.getE ...

javascriptcss

In Typescript, the function is expected to return a string rather than using the syntax of `() -> string`

Currently, I am attempting to implement the following code snippet for browser detection. However, I am encountering an error in relation to browserData, which states: Type '{ browserName: () => string; browserVersion: string | null; operatingSys ...

javascripttypescript

"Creating multiple circles on an HTML5 canvas using an iPad: A step-by-step guide

My current code is only drawing one circle at a time on an iPad view, but I want to be able to draw multiple circles simultaneously. How can I achieve this? // Setting up touch events for drawing circles var canvas = document.getElementById('pain ...

javascripthtml

JavaScript code that compares dates in an array, then calculates the total price for each month and year

I have a JSON file containing various transactions with both a date and a price attribute. My goal is to compare the dates, identify transactions that occur in the same month and year, and calculate the total price of those transactions. JSON: transactio ...

javascriptarraysjsonsortingdate

"Enhance Your WordPress Website with the Power of jQuery

I have been developing a unique Wordpress plugin that incorporates a grid loading effect using jQuery. The script I have implemented is as follows: <script type="text/javascript"> new GridScrollFx( document.getElementById( 'grid' ), { ...

javascriptphpjquerywordpress

Logging user input using Morgan: A step-by-step guide

Hey there, I'm currently working on logging user input with morgan and express. Specifically, I want to log the information shown in this image: (The user submitted a request containing an object with two key/value pairs "name" and "number") https:/ ...

javascriptexpressbackendmorgan

Using ASP.NET MVC to map FormData with an array to a model class

I am currently facing an issue with mapping a list of objects in a FormData to my ASP.NET MVC Model class at the controller. I have successfully sent the FormData over to the server-side, but I am unable to bind any value. Can someone provide guidance on h ...

javascriptc#asp.netvue.jsform-data

The Selenium driver's execute_script() function is not functioning as expected

When I attempt to execute a JavaScript using driver.execute_script, nothing happens and the system just moves on to the next line of Python code. Any ideas? I've been web scraping on a webpage, using JavaScript in the Console to extract data. The Jav ...

javascripthtmlseleniumselenium-webdriverweb-scraping

What could be the reason for the absence of the HTTP response in the network tab of the Chrome debugger?

After utilizing Postman to test my web service, I was able to find the WS's response in the http response body. However, when I made a call using ajax in my web application, I encountered an issue where I could no longer locate the response. The tab ...

javascriptajaxgoogle-chrome-devtools

What is the most straightforward method to convert a current Express node app into a static site?

After primarily working with React and create-react-app, I've grown accustomed to the convenience of having a build utility for npm that simplifies deploying projects to static web hosting platforms like github pages or surge. This process ultimately ...

javascriptnode.jsexpressherokustatic