Into the depths we delve, extending beyond to an array of objects?

Question

Into the depths we delve, extending beyond to an array of objects?

I have a question about the possibility of extending an array of objects like this:

Imagine I have :

 myObj = [
    {"name" : "one", "test" : ["1","2"]},
    {"name" : "two", "test" : ["1","2"]}
   ]

And I want to add to it something like -

 {"name" : "one" , "test" : ["1","3"]}

The expected result would be -

 myObj = [
    {"name" : "one", "test" : ["1","2", "3"]},
    {"name" : "two", "test" : ["1","2"]}
   ]

Essentially, if the object doesn't exist, it should be created. Is this type of operation possible? Appreciate any insights! Thanks!

javascript

Answer 1

Answer №1

Seems like you are looking for something similar to this:

function deepSetMerge(base, next) {
  var dataEntry = base.filter(function(it) {
    return it.name === next.name;
  })[0];

  if (dataEntry) {
    var diff = next.test.filter(function(it) {
      return dataEntry.test.indexOf(it) === -1;
    });
    dataEntry.test = dataEntry.test.concat(diff).sort();
  } else {
    base.push(next);
  }
}

var data = [{
  "name": "one",
  "test": ["1", "2"]
}, {
  "name": "two",
  "test": ["1", "2"]
}];

var add = {
  "name": "one",
  "test": ["1", "3"]
};

var obj = {
  "name": "totally-unique",
  "test": [1, 2, "nine", 17.0]
};

deepSetMerge(data, add);
deepSetMerge(data, obj);

document.getElementById('results').textContent = JSON.stringify(data);

<pre id="results"></pre>

This approach involves searching for an existing entry by name in the data structure. If no match is found, it adds the new object as a new entry.

If the entry exists, it compares the sets of items and appends any unique elements to the existing array (and sorts them).

While tailored to your specific data format, this solution effectively demonstrates the algorithm at play.

Answer 2

Seems like you are looking for something similar to this:

function deepSetMerge(base, next) {
  var dataEntry = base.filter(function(it) {
    return it.name === next.name;
  })[0];

  if (dataEntry) {
    var diff = next.test.filter(function(it) {
      return dataEntry.test.indexOf(it) === -1;
    });
    dataEntry.test = dataEntry.test.concat(diff).sort();
  } else {
    base.push(next);
  }
}

var data = [{
  "name": "one",
  "test": ["1", "2"]
}, {
  "name": "two",
  "test": ["1", "2"]
}];

var add = {
  "name": "one",
  "test": ["1", "3"]
};

var obj = {
  "name": "totally-unique",
  "test": [1, 2, "nine", 17.0]
};

deepSetMerge(data, add);
deepSetMerge(data, obj);

document.getElementById('results').textContent = JSON.stringify(data);

<pre id="results"></pre>

This approach involves searching for an existing entry by name in the data structure. If no match is found, it adds the new object as a new entry.

If the entry exists, it compares the sets of items and appends any unique elements to the existing array (and sorts them).

While tailored to your specific data format, this solution effectively demonstrates the algorithm at play.

Answer 3

Answer №2

Creating a universal extend implementation can be quite complex and expensive. This is why extensive explorations are typically avoided. It's more efficient to understand your data model and customize your approach accordingly.

Based on the given example, I would make certain assumptions about the data model:

Each object will have a unique name property that can be used for searching.
The test property holds an array (which simplifies the process, though it could also be an object requiring a standard extend implementation).

In this scenario, you could tackle it in the following manner:

var myObj = [
  {name: 'one', test: ['1', '2']},
  {name: 'two', test: ['1', '2']}
];

function extendTestValue(data, value) {
  var names = data.map(function(item) {
    return item.name;
  });
  var index = names.indexOf(value.name);
  if (index < 0) {
    data.push(value);
  } else {
    value.test.forEach(function(item) {
      if (data[index].test.indexOf(item) < 0) {
        data[index].test.push(item);
      }
    });
  }
  return data;
}

Answer 4

Creating a universal extend implementation can be quite complex and expensive. This is why extensive explorations are typically avoided. It's more efficient to understand your data model and customize your approach accordingly.

Based on the given example, I would make certain assumptions about the data model:

Each object will have a unique name property that can be used for searching.
The test property holds an array (which simplifies the process, though it could also be an object requiring a standard extend implementation).

In this scenario, you could tackle it in the following manner:

var myObj = [
  {name: 'one', test: ['1', '2']},
  {name: 'two', test: ['1', '2']}
];

function extendTestValue(data, value) {
  var names = data.map(function(item) {
    return item.name;
  });
  var index = names.indexOf(value.name);
  if (index < 0) {
    data.push(value);
  } else {
    value.test.forEach(function(item) {
      if (data[index].test.indexOf(item) < 0) {
        data[index].test.push(item);
      }
    });
  }
  return data;
}

Into the depths we delve, extending beyond to an array of objects?

Answer №1

Answer №2

Similar questions

JavaScript function unable to execute form action properly

Unexplained quirks observed in AngularJS $watch during the initialization of a controller

Extracting a specific variable value from a response by sending a request with CURL command and manipulating the data using JavaScript

How can I load data into Vuex store before the application starts?

JavaScript code failed to run

Contrast between pm.response.json() and parsing the responseBody using JSON.parse()

The Challenge with jQuery Radio Buttons

Could not complete operation: EPERM error indicating permission denied for 'stat' operation

How to transmit data using ajax through a hyperlink? (Without relying on ExtJS, jQuery, or any other similar libraries)

Tips for retrieving data from a nested Axios request?

What is the best way to delete rows from a table that was created using a JQuery AJAX response?

Show only specific items in an AngularJS application

Converting dynamic content within a div into an interactive link

Issue: The THREE.GLTFLoader cannot process this asset. Only glTF versions below 2.0 are compatible

Encountering an unhandled runtime error while importing the Client component into the server component: The JSON format is invalid, with the error message stating "undefined"

What could be causing my Leaflet popup to suddenly close?

Tips for transferring the id from a delete button to a delete button in a popup dialog box

State change shows the previous and current values simultaneously

AngularJS - let's make pagination more interactive by adding an active class to the current page

Update text displayed on radio button selection using jQuery