How can I designate an object in an array with Vue.js?

Here is a sample response I received from an API call:

{
    "1-2021": [
        {
            "id": 1,
            "status": "New",
            "player_count": 7
        },
        ...

Now, I need to iterate through the nested arrays within this structure using VueJS. Can someone guide me on how to achieve this using either forEach or any other method in VueJS?

I have researched using forEach.. but could not find any relevant information. Any help would be greatly appreciated!

The expected outcome should look like this:

chartData: [
        ['Month', 'New', 'Verified', 'Regitered ID', 'On Playing', 'Finished', 'Active', 'Inactive'],
        ['January', 7, 4, 18, 15, 9, 10, 0],
        ['February', 16, 22, 23, 30, 16, 9, 8]
      ]

Thank you for your assistance.

javascriptvue.jsforeacharrayobject

Answer №1

Check out this code snippet for a solution

let data = {
  "1-2021": [{
      "id": 1,
      "status": "New",
      "player_count": 7
    },
    {
      "id": 2,
      "status": "Verified",
      "player_count": 4
    },
    {
      "id": 3,
      "status": "Regitered ID",
      "player_count": 18
    },
    {
      "id": 4,
      "status": "On Playing",
      "player_count": 15
    },
    {
      "id": 5,
      "status": "Finished",
      "player_count": 9
    },
    {
      "id": 6,
      "status": "Active",
      "player_count": 10
    },
    {
      "id": 7,
      "status": "Inactive",
      "player_count": 0
    }
  ],
  "2-2021": [{
      "id": 1,
      "status": "New",
      "player_count": 3
    },
    {
      "id": 2,
      "status": "Verified",
      "player_count": 8
    },
    {
      "id": 3,
      "status": "Regitered ID",
      "player_count": 17
    },
    {
      "id": 4,
      "status": "On Playing",
      "player_count": 11
    },
    {
      "id": 5,
      "status": "Finished",
      "player_count": 7
    },
    {
      "id": 6,
      "status": "Active",
      "player_count": 6
    },
    {
      "id": 7,
      "status": "Inactive",
      "player_count": 0
    }
  ]
};

let tempArray = [];
let keys = Object.keys(data).forEach((key, index) => {

  if (index == 0) {
    let statusArray = data[key].map(item => item.status)
    statusArray.unshift("Month")
    tempArray.push(statusArray)
  }

  let monthlyData = [key]
  data[key].forEach(info => {
    monthlyData.push(info.player_count)
    info.status
  })
  
  tempArray.push(monthlyData)

})

console.log(tempArray)

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

How can you ensure that an event is added only once when using mouseover functionality?

One approach involves utilizing an event listener that operates as follows (in pseudo code): canvas.onmousemove = function (e) { checkCollision(e); }; var checkCollision = function(e){ var context = canvas.getContext('2d'); var coordina ...

javascriptjquery

Can a Single Page Application and a Multi-Page Application be developed concurrently?

Utilizing Laravel and vue.js, I am constructing a Single Page Application. The routing structure is set up as follows: Within my routes/web.php Route::get('/{any}' , 'SinglePageController@index')->where('any', '.*&ap ...

laravelvue.js

Managing the rendering of charts in Angular with Directives

I'm in the process of creating an admin page with multiple elements, each revealing more information when clicked - specifically, a high chart graph. However, I've encountered a challenge with the rendering of these charts using a directive. Curr ...

javascripthtmlangularjs

In JavaScript, sort the array of objects based on the key name

I have an array of objects like the following: employees = [ {name: "Tony Stark", department: "IT"}, {name: "Peter Parker", department: "Pizza Delivery"}, {name: "Bruce Wayne", department: "IT"}, {name: "Clark Kent", department: "Editin ...

javascriptarraysjsonangulartypescript

In Javascript, you can enhance your axes on a graph by adding labels at both the

Is there a way to add labels at the beginning and end of the axes to indicate the importance level, such as "not very important" and "very important"? I am currently utilizing a slider program from here. Since I am new to JavaScript, I would greatly appre ...

javascriptjqueryd3.js

This function named error is implemented in native code

My website is built in C# using asp.net. When the Onchange() event is triggered on the Dropdownlist, I call this jQuery function which displays an error: function error(){[native code]} <script type="text/javascript"> function GetDescription ...

javascriptc#jqueryasp.net

Challenges encountered when trying to incorporate vanilla JavaScript within a Ruby environment

While working on my controller, I attempted to render vanilla JavaScript but encountered an unexpected outcome. Below is the code snippet: class UploadController < ApplicationController def index render :file => 'app\views&bs ...

javascriptruby-on-railsrendering

Create an Excel spreadsheet by extracting data from a database through the use of Vue.js and Laravel Maatwebsite package

I have a query to fetch all records based on the specified date range of from and to. Using the maatwebsite package in Laravel version 2.x, however, I'm facing an issue where clicking the generate button does not result in generating an Excel file. I ...

javascriptphplaravelvue.js

Learn the method for incorporating a changing name into a radio button with Vue.js

How do I dynamically name radio buttons? <tr v-for="user in users"> <td> <input type="radio" :name="groups_[[ user.id ]]" v-bind:value="photographer" v-bind:checked="user.group.name == photographer"> <label>photographer ...

javascriptvue.js

How can a value be retrieved from an async/await function in Vue?

I have a query regarding an async function embedded in my HTML. The issue I am facing is that it returns a promise instead of the desired value. Can anyone suggest a way to properly display the value obtained from the asynchronous function? <div> ...

vue.js

Issue with Ext JS: The property 'substring' is being attempted to be read from an undefined value

Hey there! I'm trying to incorporate a grid panel into my view using Extjs 4.1.1, but I keep encountering an error in the browser console that says "Cannot read property 'substring' of undefined". Below is the JavaScript code snippet I am us ...

javascriptextjs

Unable to proceed to the following stage after returning when using vee-validate

I am currently utilizing vee-validate v3 for validating a multi-step form and then making an axios call. I have implemented handleSubmit along with ValidationObserver with unique keys for each step. However, I am facing an issue where, after progressing to ...

vue.jsvee-validate

Erase message petition

Is it possible to delete a message that triggered the bot? For example, in a discord scenario like this: Me !quote Bot 'quote........' - someone In this case, the bot deletes both its own message and mine. I have managed to write code that dele ...

javascriptnode.jsdiscorddiscord.js

What could be the reason for encountering an error when calling await on a function that has the async

In my node+ express application, I am facing an issue with a controller method that is performing an asynchronous operation. Despite declaring the method with the async modifier, it is throwing a SyntaxError: await is only valid in async functions and the ...

javascriptnode.jsasynchronousmodule

Is it possible to utilize Webpack 5's ChunkGroup API with several entries?

I am encountering an error message when attempting to upgrade from Webpack 4 to Webpack 5. The error states: Module.entryModule: Multiple entry modules are not supported by the deprecated API (Use the new ChunkGroup API) I have searched for information o ...

javascripttypescriptnpmwebpackweb-applications

Issue with Backbone 1.2 throwing incorrect JSON during model saving?

I am new to working with backbone and I have been attempting to save my model into a JSON file. Everything seems to be working fine, until I try to read the JSON output by my backbone application. Upon using Jsonlint, I discovered that my JSON is not vali ...

javascriptjsonbackbone.js

Steps for creating "..." following specific terms in a block of text using Javascript

Is there a way to display only a portion of a long paragraph and add "..." at the end in HTML? For example, consider the following paragraph: <div class="paragraph"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod ...

javascripthtmlcss

Node.js client-sessions malfunction when not utilized as a primary callback

When utilizing express.Router, I'm attempting to create a middleware for a particular router in my application that will establish and handle a session. However, this approach fails if the client-sessions session is not invoked directly by Router().us ...

javascriptnode.jsexpress

The npm script isn't executing

In my package.json file, I have the following script: "scripts": { "build": "browserify app/components/main.js -o build/js/app.js -d" } Executing this command from the shell works fine and the file is created successfully. But when I try to run npm bui ...

javascriptnode.jsnpmbrowserify

Removing duplicate values in Vue after sorting

Explore <div v-for="todo in sortedArray"> <b-button block pill variant="outline-info" id="fetchButtonGap" v-model:value="todo.items[0].arrivalTime"> {{fromMilTime(todo.items[0].arrivalTime)}} < ...

javascriptvue.jsmomentjs