Since the object you want to add has a nested property action, you might want to use destructuring to get just the action key as your inserItem function's argument.
const insertItem = (array, { action }) => [
...array.slice(0, action.index),
action.item,
...array.slice(action.index),
];
const ori_arr = [{
id: 1,
name: 'james',
age: 10
}, {
id: 2,
name: 'terrance',
age: 20
}]
console.log(insertItem(ori_arr, {
action: {
index: 1,
item: {
id: 3,
name: 'she',
age: 44
}
}
}))Hovever, if you'd prefer to avoid destructuring, just change the name of your second argument in the insertItem function for e.g. obj and then just add obj before every action.index in your function:
const insertItem = (array, obj) => [
...array.slice(0, obj.action.index),
obj.action.item,
...array.slice(obj.action.index),
];
Since the object you want to add has a nested property action, you might want to use destructuring to get just the action key as your inserItem function's argument.
const insertItem = (array, { action }) => [
...array.slice(0, action.index),
action.item,
...array.slice(action.index),
];
const ori_arr = [{
id: 1,
name: 'james',
age: 10
}, {
id: 2,
name: 'terrance',
age: 20
}]
console.log(insertItem(ori_arr, {
action: {
index: 1,
item: {
id: 3,
name: 'she',
age: 44
}
}
}))Hovever, if you'd prefer to avoid destructuring, just change the name of your second argument in the insertItem function for e.g. obj and then just add obj before every action.index in your function:
const insertItem = (array, obj) => [
...array.slice(0, obj.action.index),
obj.action.item,
...array.slice(obj.action.index),
];
You're passing the parameters incorrectly:
console.log(insertItem(ori_arr, {
action: {
index: 1,
item: {
id: 3,
name: 'she',
age: 44
}
}
}))
instead pass it without the action object:
console.log(insertItem(ori_arr, {
index: 1,
item: {
id: 3,
name: 'she',
age: 44
}
}))
If you tried logging it you'd see that inside your function insertItem you have a param called action, it's value (when you call it) is
action = { action: { index: 1, item: { id: 3, name: 'she', age: 44 }}}
so when you try to access action.item it doesn't exist.
Another solution would be to change your function to
function insertItem(array, action) {
return [
...array.slice(0, action.action.index),
action.action.item,
...array.slice(action.action.index)
]
}
Videos
If your example represents your real code, the problem is not in the push, it's that your constructor doesn't do anything.
You need to declare and initialize the x and y members.
Explicitly:
export class Pixel {
public x: number;
public y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
Or implicitly:
export class Pixel {
constructor(public x: number, public y: number) {}
}
class PushObjects {
testMethod(): Array<number> {
//declaration and initialisation of array onject
var objs: number[] = [1,2,3,4,5,7];
//push the elements into the array object
objs.push(100);
//pop the elements from the array
objs.pop();
return objs;
}
}
let pushObj = new PushObjects();
//create the button element from the dom object
let btn = document.createElement('button');
//set the text value of the button
btn.textContent = "Click here";
//button click event
btn.onclick = function () {
alert(pushObj.testMethod());
}
document.body.appendChild(btn);
let myArray = [];
let commentData = {} as Dish;
commentData.id = 3;
commentData.name = 'something';
myArray.push(commentData);
It will work...
#Answer
Answer on how to push Comment (object) into Dish.comments (array) in TypeScript.
export interface Dish {
id: number;
name: string;
image: string;
category: string;
label: string;
price: string;
featured: boolean;
description: string;
// comments: Comment[]; // remove this
comments: Array<Comment>; // <--- change to this. everytime you want to add array use Array<YourInterface>
}
export interface Comment {
rating: number;
comment: string;
author: string;
date: string;
}
dish.comments.push(commentData);
View live code on TypeScript Playground and click RUN.
As you see in the above code. You need to change Comment[] into Array<Comment>.
#Explanation
Generic Type Variables
Array<T> or Array<Type>
You may already be familiar with this style of type from other languages such as Java and C#.
We have Generic Type Variables in typescript too.
Another way to use Generic Type Variables:
Here's an example of an array with multiple types:
let x: Array<string | number>
x = ["hello", "world", 2]
This second version is common if your array consists of different types of objects. For example:
interface Boat {
name: string
}
interface SpaceShip {
code: number
}
interface Wagon {
active: boolean
}
let inventory: Array<Boat | SpaceShip | Wagon> = [];
let boatData: Boat = {
name: "Boat 1"
}
let spaceShipData: SpaceShip = {
code: 1234
}
let wagonData: Wagon = {
active: true
}
inventory.push(boatData);
inventory.push(spaceShipData);
inventory.push(wagonData);
console.log(inventory);
View live code on TypeScript Playground and click RUN.
You can learn more about Generic Type Variables here and here
All you need to do is use the .map() function the way it was intended:
const output = { 201911: {15: {...}}, 201912: {10:{...}} };
const keys = Object.keys(output);
let arr = keys.map((item, index) =>
({[keys[index]]: output[item]})
);
The .map() function is used when you want to apply a function to each element of a source array and use the returned value as an element of a new array. Because the whole point of .map() is to make a new array from the elements of an existing array, there's no need for your code to manipulate the new array at all.
There's nothing wrong with .push() otherwise; your concerns are unfounded.
I do not want to mutate array directly using push, shift or unshift methods etc...
You could destructure the array into a new array that contains the added element as well.
const output = { 201911: {15: {}}, 201912: {10:{}} }
const keys = Object.keys(output);
let arr = [];
console.log(arr);
arr = keys.reduce((res, item, index) => [...res, {[keys[index]]: output[item]}], arr);
console.log(arr);