JavaScript - Assigning the same value to 2 properties but console log displays them as distinct values

While iterating through an array of documents, I am encountering a strange issue where setting two properties to the same value results in them having different values when logged using console.log.

Here is the code snippet:

this.logicItem.$promise.then(() => {
    this.logicItem.getDocuments().$promise.then((docs: any) => {
        docs.forEach(element => {
            if (element.buildProgrammeActivityStatus === BUILD_PROGRAMME_ACTIVITY_STATUS.Confirmed ||
                element.buildProgrammeActivityStatus === BUILD_PROGRAMME_ACTIVITY_STATUS.Complete) {
                element.upper = true;
                element.canUpload = true;
            } else {
                element.upper = false;
                element.canUpload = false;
            }
        });
        console.log(docs);
    });
    this.logicItem.reload(true);
});

Upon reviewing the output from the console log, it appears that even though both properties are set to true, the value of canUpload remains false. Additionally, upper reflects the expected behavior only within the true block. What could be causing this unexpected behavior? Various iterations of looping methods have been attempted, yet the outcome persists.

Answer №1

I have tested the forEach statement extensively and it seems to be functioning properly. I experimented with different data sets and consistently received the desired outcomes. Have you attempted to log each element within the forEach loop? By doing so, you may uncover any potential issues. Are the elements appearing as anticipated? Additionally, can you clarify the purpose of the reload function mentioned?

Answer №2

When it comes to JavaScript arrays, the methods Array.forEach and Array.map serve different purposes. The forEach method simply iterates through an array without changing its values. On the other hand, the map method traverses the entire array and creates a new array based on certain conditions, without altering the original array. To update the array with the changes made using map, you must manually assign or rewrite the variable.

this.logicItem.$promise.then(() => {
this.logicItem.getDocuments().$promise.then((docs: any) => {
    // Replaced forEach with map
    docs = docs.map( element => {
        if (element.buildProgrammeActivityStatus === BUILD_PROGRAMME_ACTIVITY_STATUS.Confirmed ||
            element.buildProgrammeActivityStatus === BUILD_PROGRAMME_ACTIVITY_STATUS.Complete) {
            element.upper = true;
            element.canUpload = true;
        } else {
            element.upper = false;
            element.canUpload = false;
        }
        return element; // Include a return statement for each element
    });
    console.log(docs);
});
this.logicItem.reload(true);
});

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

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

Using the API "https://jsonplaceholder.typicode.com/photos", I have access to 5 properties: albumId: 1 id: 1 thumbnailUrl: "https://via.placeholder.com/150/92c952" title: "accusamus beatae ad facilis cum similique qui sunt" url: "https://via.placeh ...

Using jQuery and JavaScript: The recursive setTimeout function I created accelerates when the tab is no longer active

I am facing a unique challenge with my jQuery slideshow plugin that I'm currently developing. Although the code is running smoothly, I have observed an issue where if I leave the site open in a tab and browse elsewhere, upon returning to the site (us ...

How to conditionally prevent event propagation to children in VueJs

This Vue component is called ColorButtonGroup, and it serves as a group of checkbox/toggle buttons. It has a maximum limit of 4 colors that can be selected. The component utilizes another component called ToggleButton, which is a simple toggle selection w ...

Oops! Looks like the connection has been abruptly cut off from the ASYNC node

Is there a way to properly close an async connection once all data has been successfully entered? Despite attempting to end the connection outside of the loop, it seems that the structure is being finalized after the first INSERT operation CODE require( ...

Steps for setting the keys of a map as a priority when initializing a state variable in Typescript for a React component

I am working with a state variable that connects a string username to a UserData object. Initially, the usernames are stored in the string array 'users'. Is there a method to assign the initial state of 'userDataMap' with the keys fro ...

Issue with datepicker initialization causing format not to work in Bootstrap

I am currently incorporating the angular-bootstrap datepicker module into my app and have run into a minor issue. I am using an input text field and a button to display the date in the following manner: <div class="row" id="datePicker"> <p cl ...

Having trouble with GoogleSignIn in React Native Firebase app

During the development of my React Native App, I integrated Firebase as the Authentication System. The app compiled successfully, but upon attempting to use the GoogleSignIn method, an error message appeared on the AndroidToast: "Se ha producido un error. ...

"Viewed By" aspect of Facebook communities

I'm working on implementing a feature that shows when a post has been seen, similar to Facebook groups, using JS and PHP. I've been able to track the number of times a post has been seen through scrolling actions, but now I want to determine if u ...

The underscore (_) parameter in HTTP GET requests

Lately, I've been seeing the '_' parameter on many websites with a seemingly random string attached to it. For example: website.com/?_=98765432 Can someone explain the significance of this parameter and how these numbers are generated? ...

Issue with Vuex: currentUser state not persisting after page refresh

I'm currently working on a Vue.js SPA that utilizes Rails 6 API as the backend and Vue-cli (legacy webpack template). After signing in a user, everything seems to be functioning correctly. I can view the user details, it updates my setCurrentUser mut ...

Implementing AngularJS JQuery Datatables Directive for Displaying Multiple Data Tables within a Single View

I have successfully implemented the following directive: angular.module('myApp').directive('jqdatatable', function () { return { restrict: 'A', link: function (scope, element, attrs, ngModelCtrl) { ...

Tips for obtaining the sources of every image on a webpage and consolidating them in a single section

My goal is to preload all images on a webpage into a single division before the page loads. For example, if there are 5 images on the page (eg1.png, eg2.jpg, eg3.bmp, eg4.jpg, eg5.png), I want them to be contained within a div with the id 'pre'. ...

Incorporating JavaScript Object-Oriented Programming in PHP

As someone new to JS programming, I am tasked with developing a php web application that relies on ajax calls for all actions without reloading the page. While I have completed the php and JS code, I am struggling to understand what JS OOP entails. My coun ...

Ensure the Image URL is valid before modifying the State in React/Next

This code snippet is written in React/Next.js with styled-components. Hey there, I have a component that displays a blog banner using a background-image. The URL for the image comes from a state variable that currently holds a default image path. const [b ...

Managing state on the login page functions properly, although there is a minor inconvenience of having to click the login button twice after entering the username and password

In Login.tsx, I store user/pass info in a useState called login and pass it up to App.tsx. I then store the access property from login useState to access useState inside App.tsx. While this does technically work, there is an issue where it seems to be one ...

The Axios post request is mistakenly sending my data as the key with an empty value instead of sending the entire data object itself

I began by developing the frontend, but now I am looking to create the backend in order to establish a connection with a database. const express = require("express"); const bodyParser = require("body-parser"); const cors = require(" ...

JavaScript has issues with undefined array elements

Even though there is data in bindInfo, the array elements in Bind are showing as undefined. Any recommendations? let bindinfo = { clientid: 1, clientname: 'Web Client', nowutc: now_utc, bindlist: Bindings(this.props.bindDetails) ...

What is causing my for/in loop to return null results, while the regular for loop works perfectly fine? (VISUALS included)

My goal is to iterate through an array of objects using a for/in loop in order to log specific properties of each object to the Chrome dev console. However, I am encountering issues as I keep getting null values. As a workaround, I attempted to use a regul ...

Trouble displaying JSON data when using a search box filter in React

My webpage is using JSON dummy data that can be filtered by keywords entered into a search box. Previously, all the data displayed correctly before creating filteredJson, but now nothing is showing up. What could be causing this issue? I want to send the ...

Tips for avoiding cropped images on mobile websites:

I recently created a website that looks perfect on desktop but appears cropped on mobile devices. The site in question is doc.awsri.com Here are the images causing the issue: https://i.stack.imgur.com/eRJXU.png The problem arises when viewing it on a ph ...