A method for cycling through parent and child objects in JavaScript (Vue.js) and storing them in an array - how to

I have a JSON object structured like this.

    const jsonData = {
            "id": "6",
            "name": "parent",
            "path": "/",
            "category": "folder",
            "fid": "6",
            "children": [
              {
              //details
              },
              {
              //more details
              }
            ]
        }

What is the best way to iterate over this data and push it into a new array?

Declaration of array variable

getEntry: Array<Object> = []

Method to push object into an array

get addedEntry() {
  let files = [] 
  this.getEntry = files.push(this.jsonData)
}

However, I am encountering a type error. How can I successfully push this object into an array or convert it into an array?

javascriptarraystypescriptvue.js

Answer №1

When using the push method, be aware that it returns a Number indicating the updated value of the array. This can lead to a TypeError if you attempt to assign a Number to an Array of Objects.

To resolve this issue, consider the following alternative approach.

get updatedEntries() {
  let entries = []
  entries.push(this.object)
  this.entriesArray = entries
}

For more information on the push method in JavaScript, refer to the official documentation.

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

Updating from version 1.8.10 to 2.9.2 and encountering a build error in version 4.6.4

I currently have an angular application that is using typescript version 1.8.10 and everything is running smoothly. However, I am interested in upgrading the typescript version to 2.9.2. After making this change in my package.json file and running npm inst ...

c#typescriptnpmtypescript-typingstypescript2.0

Limit the velocity of an object in Box2D using JavaScript

In my Box2D simulation, a collection of dynamic objects is experiencing various random forces. Is there a way to set a maximum speed for each object (both translational and rotational)? I considered implementing a workaround, but I'm curious if the e ...

javascriptbox2d

Removing Redux State in ReactDeleting data from Redux in a

After displaying a list of data on a table, I have implemented a View component where specific data from the list is passed. However, I am facing an issue when attempting to delete something in the View modal dialog as the redux data delete reducer does no ...

javascriptreactjsreduxreact-hooksmaterial-ui

What is the process of making circle or square shapes with text inside using React, without the use of SVG images?

Is there a way to create circle and square shapes in React with custom text inside, without relying on SVG images? Check out this example: https://i.sstatic.net/iHZgy.png I attempted the code below but it did not render any shapes: import React from &apos ...

javascripthtmlcssreactjs

A guide on updating table rows in Material UI and React Table

I am currently developing a table using Material UI/React that consists of multiple text fields per row and permits users to delete specific rows. Each row in the table is generated from a list, and I am utilizing React's state hooks to manage the sta ...

javascriptreactjsmaterial-ui

Searching with Vue JS and Firebase using multiple .Where() functions can be achieved by chaining these methods together. This

Looking to search multiple collections, not just brand. I am querying directly from Cloud Firestore Successfully pulled data for brand Trying to incorporate category and description as well, but facing issues Using where() to query Firebase getExchanges ...

firebasevue.jsgoogle-cloud-firestoreconditional-statementswhere-clause

Exploring X3DOM nodes using d3.js

I'm attempting to loop through X3DOM nodes in D3.js, but I'm encountering an issue. Check out the code snippet below: var disktransform = scene.selectAll('.disktransform'); var shape = disktransform .datum(slices ...

javascriptd3.jsdom-eventsx3dom

Integrating social login using vue-authenticate with passport in a Node.js environment

I've been working on integrating Facebook login with vue-authenticate and passport. Successfully logged into my Facebook account, I obtained the 'Callback code' as well. Here is my callback URL: http://localhost:8080/auth/callback?code=AQD0 ...

node.jsvue.jsaxiospassport.jsvue-authenticate

Performing an HTTP request using the Cntlm proxy

I've been attempting to send an HTTP request through a Cntlm proxy in NodeJs, but I'm having trouble getting it to function. Below is the code I've written: var http = require('http'); var options = { host: 'http://127.0.0 ...

javascriptnode.jshttpntlm

HTML string decoded incorrectly in CodeIgniter due to encoding error

When I send data that includes an HTML string along with other information from JavaScript to the PHP (Codeigniter) server using AJAX and JSON, I notice that the style information within the HTML string is missing once it reaches the server. Everything els ...

javascriptphphtmlajaxcodeigniter

Vuejs may encounter challenges with v-model when numerous items are present on the page

My simple page consists of a form at the top for submitting data and a list below that, as shown in the image: https://i.sstatic.net/3WjY2.png The list is populated with data from an api, each object having only 4 properties. Currently, there are a total ...

javascriptvue.js

Using the goBack function in React Router does not add the previous location to the stack

In React Router v4, I have a list page and a details page in my web application. I want to implement a 'Save and close' button on the details page that redirects the user back to the list page when clicked. However, I noticed that after the user ...

javascriptreactjsreact-router

Implementing a variety of threshold colors in Highcharts

Exploring this Highcharts fiddler: http://jsfiddle.net/YWVHx/97/ I'm attempting to create a similar chart but encountering some issues. The fiddler I'm currently working on is here: (check out the edit below!) The key difference in functionalit ...

javascriptjqueryhighcharts

Ways to expand a TypeScript interface and make it complete

I'm striving to achieve the following: interface Partials { readonly start?: number; readonly end?: number; } interface NotPartials extends Partials /* integrate Unpartialing in some way */ { readonly somewhere: number; } In this case, NotPar ...

javascripttypescript

Guide to shuffling an array with a simple click of a button

To simplify, I have an array that I would like to randomize by clicking a button. Once randomized, I want to display the first result from the array with another button. The array is currently randomized when opened in Chrome, and checking the results in t ...

javascriptarraysbutton

Locating the Searchbox on Google Maps with the angular-google-maps library

I am currently working on positioning the Google Maps searchbox variable in a way that allows it to stay fixed under markers as they are listed. I am utilizing the Angular Google Maps library for this purpose, which provides a directive known as <ui-g ...

javascriptangularjsgoogle-maps

Scroll-triggered closing of modals in Next Js

I have integrated a Modal component into my Next.JS application, and I have implemented a functionality to close the modal when the user scrolls outside of it. However, this effect is also triggering when the user scrolls inside the modal. How can I modi ...

javascriptreactjsnext.js

FullCalendar Angular 10 not displaying correct initial view

I am currently using Angular 10 along with FullCalendar version 5.3.1., and I am facing an issue where I cannot set the initial view of FullCalendar to day view. It seems to be stuck on the dayGridMonth view by default. Below is the HTML snippet: <full ...

javascriptangularfullcalendarfullcalendar-5

Prevent postback when clicking on an image button in ASP

I have a project in ASP where I have an image button that allows users to browse an image and display it. I am utilizing a script for this project. Here is the code I am using: ASPX: <asp:Panel ID="stage" runat="server" cssClass="containment-wrapper" ...

c#javascriptasp.net

In JavaScript, split each element in an array into individual elements

Is there a way to split elements separated by commas into an array in JavaScript? ["el1,el2", "el3"] => ["el1", "el2", "el3"] I am looking for a solution to achieve this. Can you help me with that? ...

javascriptarrays