Creating a new attribute within a JavaScript object by utilizing the properties of its sibling elements

Question

Creating a new attribute within a JavaScript object by utilizing the properties of its sibling elements

Imagine a scenario where you have a complex array of objects structured like this:

[
  {
    "title": "Fundamentals",
    "order": 1,
    "lessonRef": "fundamentals",
    "children": [
      {
        "title": "History",
        "order": 1,
        "lessonRef": "history",
        "children": []
      },
      {
        "title": "NEW NODE 1",
        "lessonRef": "NEW NODE 1 STUB",
        "children": []
      },
      {
        "title": "Math",
        "order": 2,
        "lessonRef": "math",
        "children": []
      },
      {
        "title": "NEW NODE 2",
        "lessonRef": "NEW NODE 2 STUB",
        "children": []
      }
      {
        "title": "Geography",
        "order": 3,
        "lessonRef": "geography",
        "children": []
      }
    ]
  },
  {
    "title": "Basics",
    "order": 2,
    "lessonRef": "basics",
    "children": []
  }
]

How can you:

Sequentially go through each node,
Detect any new node that does not have the order field and assign it the next number depending on its position in the array,
Subsequently, increment the order of every existing sibling after it while also
Considering any other newly added nodes that come after it?

I am seeking a lodash method to help me initiate the process before delving into pure javascript.

UPDATE: I have shared my solution -- note that the order of elements in the array is set, but the question will be expanded to address scenarios where the order is not predefined.

javascript arrays sorting lodash

Answer 1

Answer №1

if this is what you wish to accomplish:

let yourArrayData = yourDataArr
let arr1 = []


//begin with fixing children
_.each(yourArrayData, function(element) {
    if(element.children) element.chilren = adjustArr(children)
    arr1.push(element)
})


//adjust your array
yourArrayData = adjustArr(arr1)


//fix the function
function adjustArr(arr) {

    let result = []
    let previousOrder

    _.each(arr, function(element) {


        let currentOrder = element.order

        if(!currentOrder) {
            element.order = previousOrder?previousOrder + 1:1
            previousOrder = element.order + 0
        }
        result.push(element)

    })

    return result

}

//alternatively, this might be what you are looking for
function adjustArrAlt(arr) {

    let result = []
    let order = 1

    _.each(arr, function(element) {

        element.order =  order + 0
        result.push(element)
        order ++

    })

    return result

}

Answer 2

if this is what you wish to accomplish:

let yourArrayData = yourDataArr
let arr1 = []


//begin with fixing children
_.each(yourArrayData, function(element) {
    if(element.children) element.chilren = adjustArr(children)
    arr1.push(element)
})


//adjust your array
yourArrayData = adjustArr(arr1)


//fix the function
function adjustArr(arr) {

    let result = []
    let previousOrder

    _.each(arr, function(element) {


        let currentOrder = element.order

        if(!currentOrder) {
            element.order = previousOrder?previousOrder + 1:1
            previousOrder = element.order + 0
        }
        result.push(element)

    })

    return result

}

//alternatively, this might be what you are looking for
function adjustArrAlt(arr) {

    let result = []
    let order = 1

    _.each(arr, function(element) {

        element.order =  order + 0
        result.push(element)
        order ++

    })

    return result

}

Answer 3

Answer №2

Following the advice of @jfriend00, I iterated through each element in the array recursively and assigned a specific order based on its index:

function updateElementOrder(array){
  return _.map(array, function (value, index) {
    value.order = index + 1;
    if(value.children.length > 0){
      value.children = updateElementOrder(value.children);
    }
    return value;
  });  
}
$scope.array = updateElementOrder($scope.array);

In my scenario, the order of the array is predetermined, but I pose the question of how to handle cases where the order is not predefined.

Answer 4

Following the advice of @jfriend00, I iterated through each element in the array recursively and assigned a specific order based on its index:

function updateElementOrder(array){
  return _.map(array, function (value, index) {
    value.order = index + 1;
    if(value.children.length > 0){
      value.children = updateElementOrder(value.children);
    }
    return value;
  });  
}
$scope.array = updateElementOrder($scope.array);

In my scenario, the order of the array is predetermined, but I pose the question of how to handle cases where the order is not predefined.

Creating a new attribute within a JavaScript object by utilizing the properties of its sibling elements

Answer №1

Answer №2

Similar questions

Tips for sending a JavaScript variable through an AJAX URL

Javascript adds a comma after every postback event

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

Attempting to extract data from a text document and organize it into an array

Tips on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

HeatMap Visualizations Data

Animation of active chat list items on Whatsapp

Is it possible to verify if the provided form input variable exists within an array? Can anyone point out any oversights?

Having trouble with my ReactJS application where click interactions are functioning properly on the header but not on my content

Issues with jQuery Ajax functionality in Rails application not achieving successful completion

Create a dynamic image showcase using PHP or JavaScript

Exploring Ternary Functions within an Associative Array in PHP

DataTables prioritizes sorting strings over numerical values

Guide to retrieving the previous URL in Angular 2 using Observables

Leveraging Next.js 'useClient' in conjunction with server component (global)

How to retrieve the value of an observable from a regular JavaScript array in Knockout JS?

Issue with ThemeManager in Material UI & React: Constructor is not valid

Can you recommend any open source projects with exceptionally well-written Jasmine or Jasmine-Jquery tests?

Obtaining the complete JSON array in string format

I'm having trouble with Material Design Slide Toggle as it lacks event.StopPropagation functionality. Any suggestions on what alternative I