A step-by-step guide on including an object within an object array with Javascript

In the code snippet below, I have a JavaScript object that I'm trying to add a similar object to using request.rules[0].

request :  [
  rules: 
  [
    {
      pageFilters: 
      [
        {
          matchType: 'contains', 
          type: 1, 
          value: 'a'
        }, 
        {
          matchType: 'does not contain', 
          type: 1, 
          value: 'b'
        }
      ], 
      name: 'TEST'
    }
  ]
]

Here is the object I want to push into request.rules[1]:

{
  pageFilters: 
  [
    {
      matchType: 'contains', 
      type: 1, 
      value: 'c'
    }, 
    {
      matchType: 'does not contain', 
      type: 1, 
      value: 'd'
    }
  ], 
  name: 'TEST 2'
}

Below is my attempted implementation, which is not working as expected...

request.rules[1].pageFilters[0].push({
  matchType: 'contains', 
  type: 1, 
  value: 'c'
})
request.rules[1].pageFilters[1].push({
  matchType: 'contains', 
  type: 1, 
  value: 'd'
})
request.rules[1].name = "TEST 2";

Here is the desired outcome:

request :[
  rules: 
  [
    {
      pageFilters: 
      [
        {
          matchType: 'contains', 
          type: 1, 
          value: 'a'
        }, 
        {
          matchType: 'does not contain', 
          type: 1, 
          value: 'b'
        }
      ], 
      name: 'TEST'
    },
    {
      pageFilters: 
      [
        {
          matchType: 'contains', 
          type: 1, 
          value: 'c'
        }, 
        {
          matchType: 'does not contain', 
          type: 1, 
          value: 'd'
        }
      ], 
      name: 'TEST 2'
    }
  ]
]
javascriptarraysobject

Answer №1

There is no need to specify a specific position for pushing, such as request.rules[1].pageFilters[0], instead, you can push directly to the array like so

var newFilter = {
  matchType=exact, 
  type=2, 
  value=d
};

request.rules[1].pageFilters.push(newFilter);

Answer №2

When dealing with a proper object and utilizing request as an object,

request: { // ensure that it is structured as an object, not an array
    rules: [

you have the option to simply:

var object1 = { request: { rules: [{ pageFilters: [{ matchType: 'contains', type: 1, value: 'a' }, { matchType: 'does not contain', type: 1, value: 'b' }], name: 'TEST' }] } },
    object2 = { pageFilters: [{ matchType: 'contains', type: 1, value: 'c' }, { matchType: 'does not contain', type: 1, value: 'd' }], name: 'TEST 2' };
            
object1.request.rules.push(object2);
    
console.log(object1);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer №3

Comprehending your code, { matchType=contains, type=1, value=c } I observed { type:1, value:c }

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

The function history.popstate seems to be malfunctioning, as it is triggered by both the forward and backward navigation buttons in

When I press the back button, I am attempting to retrieve the previous state. Upon inspecting, I noticed that the popstate function is also triggered by the forward button. However, it does not revert to the previous state even though the popstate function ...

javascripthtmlangularjshtml5-historyweb-frontend

Retrieve targeted HTML content using AJAX from a webpage that is already being fetched via AJAX

Looking to load a specific div on my webpage via Ajax call, but the content I want to load is itself loaded via ajax. This means I can't get the full HTML content as desired. function loadajax(){ $.ajax({ url: 'http://callcom-com-au.myshopify. ...

javascriptjqueryajax

How can we include identical item names within a single JavaScript object?

My attempt at achieving the desired result involves creating an object like this: var obj = {id: id, items: "asdf", items: "sdff", test: varTest}; However, I face a challenge where I need to dynamically add two elements with the same name 'items&apo ...

javascriptjqueryjsonobject

When attempting to navigate to a different page in Next.js, the Cypress visit functionality may not function as

In my upcoming application, there are two main pages: Login and Cars. On the Cars page, users can click on a specific car to view more details about it. The URL format is as follows: /cars for the general cars page and /cars/car-id for the individual car p ...

javascriptnext.jscypress

Control the frequency of server requests within a set limit

Currently, I am utilizing the request-sync library to fetch data from a specific site's API. This is how my code looks: let req = request('GET', LINK, { 'headers': { 'Accept' ...

javascriptnode.jsrequest

How can I safeguard my app from crashing when the initial state is set by undefined props?

What is the best way to prevent the state from crashing if props native_languages[0] does not exist? This is my attempt at protecting the app, but it still crashes when native_languages[0] does not exist: this.state = { language: props.currentDocu ...

javascriptreactjs

I am looking to showcase the information from two separate collections

I am looking to display data from two separate mongoose collections. I have a Member collection and a Property collection. Below is my code for fetching the data: const Property = require('../models/propsSchema') const Members = require(&apo ...

javascriptnode.jsmongodbmongoose

Having an issue with my application crashing and showing the message "[nodemon] app crashed - waiting for file changes before starting...". Does anyone know how to

mainapp.js const PORT = 3000 const express = require('express') const axios = require('axios') const cheerio = require('cheerio') const app = express() app.listen(PORT, ()=>console.log('Server running on port ${PORT} ...

javascriptnode.jsapiexpressnodemon

Switching classes in real time with JavaScript

I'm struggling to understand how to toggle a class based on the anchor text that is clicked. <div> <a id="Menu1" href="#">Menu</a> <div id="subMenu1" class="subLevel"> <p>stuff</p> </div> <div> <a i ...

javascriptjqueryhtmlcss

Leveraging WebWorker in Azure DevOps WebExtension

I am attempting to employ a WebWorker within a WebExtension on an Azure DevOps Server. Data processing for a large repository can be quite resource-intensive, prompting me to utilize a WebWorker for background calculations. However, when I try to instant ...

javascriptazure-devops

Utilizing the powerful combination of AngularJS and Node.js functions

I am facing an issue with the key_client variable as it needs to be loaded with an md5 value obtained from a module called nodejs get-mac. Despite my efforts, I have been unable to make it work successfully. The problem seems to be that key_client is alw ...

javascriptangularjsnode.js

There seems to be an issue with the React Hooks edit form where it is not selecting the record to edit. Although the currentId is correct

I have a simple CRUD React Hooks app with an ASP.NET Core Web API. The Courses component displays a list, but when I click on a link to edit a particular course, the form shows up with empty fields. Here is the JSX for the Courses component: import React, ...

javascriptreactjsreduxreact-hooks

How come a Google Maps API component functions properly even without using *NgIf, but fails to work when excluded in Angular 9?

I recently followed the guide provided in this discussion with success. The method outlined worked perfectly for loading search boxes using this component: map.component.html <input id= 'box2' *ngIf="boxReady" class="controls" type="text" p ...

javascriptangulartypescriptgoogle-maps-api-3angular-ng-if

Getting Started with Material UI's Default Components

After working with bootstrap, I decided to explore the material ui framework as well. However, when trying to use the default MUI component without customization, such as the card component, I encountered some difficulties. Here is an example of one of th ...

javascriptreactjsmaterial-ui

Use Javascript to create commands and variables specific to the domain or site of a webpage

Currently, I have implemented the code below to fetch the latest tweet. However, I am looking for a way to customize the TWITTERUSERNAME based on the domain where the template is being used. This template is shared across multiple domains. <script type ...

phpjavascriptjquery

"Troubleshooting: Mongoose uniqueness feature not functioning

I am encountering an issue with mongoose where 'unique:true' is not functioning as expected. Take a look at the schema I have formulated: var mongoose = require('mongoose'); var userSchema = mongoose.Schema({ username:{ type:St ...

javascriptnode.jsmongodbmongoose

Is there a way to dynamically register an external component in Vue3 without altering the main project?

In my current project, known as "ProjectMain," I am also working on another project that will act as an extension to ProjectMain - let's call it "MyComponent." My intention is to create MyComponent as a standalone library. My main question is: can I ...

javascriptvue.jsvuejs3

Encountering the error message "Unable to locate module '.nextserverpages-manifest.json'" while attempting to include `babel.config.js` in a Next.js application

During the process of setting up testing for my current next app, we incorporated some new dependencies including jest, babel-jest, @babel/preset-env, @babel/preset-react, and react-test-renderer. We also created a babel.config.js file to configure Babel s ...

javascriptnode.jsreactjstestingnext.js

What is the most effective way to determine which radio button is currently selected in a group with the same name using JQuery?

<form class="responses"> <input type="radio" name="option" value="0">False</input> <input type="radio" name="option" value="1">True</input> </form> Just tested: $('[name="option"]').is(':checked ...

javascriptjqueryhtml

Using RxJS with Angular to intercept the valueChanges of a FormControl prior to subscribing

I decided to create a new observable using the values emitted by the FormControls.valueChanges observable. This creation of the observable takes place within the ngOnInit method in the following manner: ngOnInit(): void { this.myObservable$ = combine ...

javascriptangulartypescriptrxjsobservable