I'm struggling to understand when it's best to declare an object inside an array or an array inside an object.
Object inside an array
var users = [{'Name': 'Alex', 'Value': 2}]
Array inside an object
var user_data = {interest:['a','b','c'], name:['Ali','Baba','Alan']}
Could someone provide some clarification on this? Thanks in advance!
It is important to consider the specific needs of your data when choosing between using an array of objects or an object of arrays. Think about whether you will be performing more add/delete operations or read/find operations on the data, as this can influence your decision.
An array of objects makes it easier to add or delete entities with single atomic actions. For example:
var arr = [{x: 'a', y: 1}, {x: 'b', y: 2}];
arr.push({x: 'c', y: 3}); // add new entity
var obj = arr.shift(); // remove first element and store in variable
On the other hand, an object of arrays requires separate removal of elements like x and y:
var obj = {x: ['a', 'b'], y: [1, 2]};
// add
obj.x.push('c');
obj.y.push(3);
// remove
obj.x.shift();
obj.y.shift();
Object of arrays may be more compact when dealing with a lot of empty values, resulting in fewer bytes being sent over a network and less iterations needed for operations like finding min/max values.
var arr = [
{x: 'a'},
{y: 1},
{y: 2},
{y: 3},
{y: 4},
{y: 5},
{x: 'b', y: 6}
];
// Find max value for x property
var maxX = arr.reduce(function(max, obj) { // 7 iterations
return obj.x > max ? obj.x : max;
}, '')
The same operation with an object of arrays:
// more compact representation
var obj = {
x: ['a', 'b'],
y: [1, 2, 3, 4, 5, 6]
}
// fewer iterations (only 2 in this case)
var maxX = obj.x.reduce(function(max, val) {
return val > max ? val : max;
}, '')
I am having trouble replacing $('#divy a:lt(3)') with the variable instead of a hard-coded number like $('#divy a:lt(count)'). Check out this Fiddle for more information. var timerId, count = 0; function end_counter() { $('# ...
I have brought in several JSON files containing different sets of data. For my parent.vue input, I aim to iterate through these JSON files dynamically. <div v-for="(item, index) in <!-- JSONFile + Rank -->" :key="index"> T ...
I am implementing a Bootstrap 5 switch input that I need to be mandatory, meaning it should be checked by default and not uncheckable. The official documentation suggests combining the attributes checked and disabled. However, it seems like the Javascrip ...
Currently working on a GatsbyJS project and attempting to utilize a Hook, however encountering an error message. Initially, I decided to remove the node_modules folder and package.json.lock file, then executed npm install again, unfortunately without reso ...
Hey there, I'm currently working on parsing JSON data ** { "message": "gradeExam.php", "id": "171", "student_id": "dfd", "questions": [{ "question_id": "0", "student_input": "def doubly_" }, { ...
Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...
The objective: To dynamically update the webgrid without reloading the page using ajax when navigating to the next page. My current setup : public ActionResult Index() { var users = (from a in _context.Audit select new ...
Just starting out with JavaScript and working on a simple project. My goal is to have the background image of an HTML document change to a random picture from a directory named 'Background' every time the page is opened. function main() { // ...
I am facing an issue with accessing a child element's method from the parent element using ref='menu'. When I try to call $refs.menu.show in a button element within the Vue app, it works fine. However, when I try to do the same in a photo el ...
https://jsfiddle.net/gdrkftwm/ https://i.sstatic.net/CTi2F.jpg I have encountered a problem while creating a table from a Json object. There seems to be an extra td being generated, and I'm not sure why. I want the structure of my table to resemble ...
Check out my HTML and JavaScript code: <form id="form" action="javascript:void(0)"> <input type="submit" id="submit-reg" value="Register" class="submit button" onclick="showtemplate('anniversary')" style='font-family: georgia;font- ...
the following scenario demonstrates a situation where an array is filled in by a MySQL query: $array=(1,4,5,6,8); $query=SELECT * FROM table WHERE Id IN(".implode(",",$array)." However, the challenge arises when trying to achieve the following: $array=( ...
$(document).ready(function () { function initializeMap(data) { var map; alert(data); map = new L.Map('map', { zoom: 8, layers: [OSM] }); var array = $.parseJSON(data); alert( ...
Currently, I am working on a Backbone application that utilizes a collection to manage data sources. Each time a new data source is added, its model is included in the collection and a jQuery Ajax call is triggered as follows: fetch: function() { ...
Here's a scenario: var arr = [{id:1,name:'a'},{id:2,name:'b'},{id:3,name:'c'}]; I'm looking to delete the element with id value of 3 from this array. Is there a method to achieve this without using splice? Perhap ...
I am facing an issue with assigning my AJAX return as a variable to concatenate. Here is the sample code: function FetchSex() { $.ajax({ url: '/SEX/GetAllSex/', success: function (responseDat ...
Having a Rails app, I wanted to replicate the onunload effect to prompt before leaving changes. During my search, I came across Are You Sure?. After implementing it on a form, I noticed that it only works on page refreshes and not on links that take you a ...
If I have a specified start and end date, I am interested in knowing the progress percentage achieved from the start date up to the current date compared to the end date. To put it simply: I would like to determine how far along I am towards the end date i ...
Can anyone explain how to find the length of a custom typed array? For example: type TMyArray = IProduct[] interface IProduct { cost: number, name: string, weight: number } So, how can we determine the length in this case: const testArr: TMyArray ...
Incorporating Bootstrap5 and VueJS 2, I am working on designing a layout of cards in a "pinterest-style" arrangement, as depicted in the following screenshot: https://i.sstatic.net/AvdWR.png To achieve the layout showcased above, the HTML markup required ...