Display array values in JavaScript from different arrays

Question

Display array values in JavaScript from different arrays

I'm currently working on extracting data from my API to plot it in a graph. Specifically, I am interested in obtaining an array that contains only the 'date' values. Here's what I have managed to extract so far:

https://i.sstatic.net/03ZtO.png

This is the code snippet that allowed me to achieve this:

return {
    props: {
      data: data
    }
  }

  console.log([[props][0]['data']])

My question is, how can I obtain the 336 'date' values and store them in an array format like [20210112, 20210111, 20210110...]? I've searched for documentation but haven't found a solution. Any suggestions would be greatly appreciated.

javascript json

Answer 1

Answer №1

To extract the values of the date field from each data item, you can use the map method along with destructuring in a callback function.

const data = [
  { date: 20210101 }, { date: 20210102 }, { date: 20210103 },
  { date: 20210104 }, { date: 20210104 }, { date: 20210105 }
];

const datesOnly = data.map(({ date }) => date);

console.log(datesOnly);

Destructuring allows for easy extraction of values like so:

const item = { date: 20210101 };

// Extracting 'date' into a variable
const { date } = item;

console.log(date);

You can also rename the extracted variable:

const item = { date: 20210101 };

const { date: myDate } = item;

console.log(myDate);

Additional Field Extraction

If you need to extract multiple fields at once, you can map a new object using destructuring.

const data = [
  { date: 20210101, eg: 1 }, { date: 20210102, eg: 2 }, { date: 20210103, eg: 3 },
  { date: 20210104, eg: 4 }, { date: 20210104, eg: 5 }, { date: 20210105, eg: 6 }
];

const datesEgsOnly = data.map(({ date }) => date);
const egsOnly = data.map(({ eg }) => eg);
const datesAndEgsOnly = data.map(({ date, eg }) => ({ date, eg }));

console.log(datesEgsOnly);
console.log(egsOnly);
console.log(datesAndEgsOnly);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 2

To extract the values of the date field from each data item, you can use the map method along with destructuring in a callback function.

const data = [
  { date: 20210101 }, { date: 20210102 }, { date: 20210103 },
  { date: 20210104 }, { date: 20210104 }, { date: 20210105 }
];

const datesOnly = data.map(({ date }) => date);

console.log(datesOnly);

Destructuring allows for easy extraction of values like so:

const item = { date: 20210101 };

// Extracting 'date' into a variable
const { date } = item;

console.log(date);

You can also rename the extracted variable:

const item = { date: 20210101 };

const { date: myDate } = item;

console.log(myDate);

Additional Field Extraction

If you need to extract multiple fields at once, you can map a new object using destructuring.

const data = [
  { date: 20210101, eg: 1 }, { date: 20210102, eg: 2 }, { date: 20210103, eg: 3 },
  { date: 20210104, eg: 4 }, { date: 20210104, eg: 5 }, { date: 20210105, eg: 6 }
];

const datesEgsOnly = data.map(({ date }) => date);
const egsOnly = data.map(({ eg }) => eg);
const datesAndEgsOnly = data.map(({ date, eg }) => ({ date, eg }));

console.log(datesEgsOnly);
console.log(egsOnly);
console.log(datesAndEgsOnly);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Display array values in JavaScript from different arrays

Answer №1

Additional Field Extraction

Similar questions

Error in Discord.JS: The function message.author.hasPermission is not recognized

Exploring VueJS templating: Loading external templates

Node server quickly sends a response to an asynchronous client request

What causes the component to remount with every update to its state?

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Adjusting color with the .on method in Event Listener

Enhance jQuery dataTable with live updates from Firestore querySnapshot

What is the best way to insert events into your Google Calendar directly from a website?

When trying to make a POST request, the browser displayed an error message stating "net::ERR_CONNECTION

Retrieving text content from a file using React

Javascript - Relocating a file to a different folder in a node.js environment

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing

Encountering an error stating 'ReadableStream is not defined' while attempting to log in using Discord on the NextAuth application

NVDA fails to announce the "dialog" when a Modal is launched

Transform JSON data into a PDF file using NodeJS

Tips for effectively utilizing typescript interface with the OR operator

Converting Laravel variable into an image using JavaScript

When you click on the input field, a file manager window will open. You can then select a file and the URL of the selected file will be automatically added to the

Facing delays in receiving responses for inner loop in node.js

Handling 401 Status Codes with Access and Refresh Tokens in a React and Node Application