Creating an assortment based on a specific design

I have encountered an issue with the positions of markers while using Google Maps in my app. Google requires data in a specific format as shown below:

const stops = [
            [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass", 1],
            [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa", 2],
            [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross", 3],
            [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing", 4],
            [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock", 5],
          ];

However, the data I am receiving from the API looks like this:

[{"id":40,"name":"3C Cinnah Cafe","longitude":32.855826,"latitude":39.896092},{"id":49,"name":"A.K. Simit Fırın Cafe","longitude":32.8469142,"latitude":39.

8871573},{"id":61,"name":"Aroma Coffee","longitude":32.7981522,"latitude":39.8943212}]

As a result, I need to rearrange the received data to match the Google template. Any suggestions on how to achieve this?

javascriptarraysjsontypescriptgoogle-maps

Answer №1

If you want to transform the array you have into a different format, you can utilize the map function.

const originalData = [
  { id: 40, name: "3C Cinnah Cafe", longitude: 32.855826, latitude: 39.896092 },
  {
    id: 49,
    name: "A.K. Simit Fırın Cafe",
    longitude: 32.8469142,
    latitude: 39.8871573,
  },
  { id: 61, name: "Aroma Coffee", longitude: 32.7981522, latitude: 39.8943212 },
];

const transformedData = originalData.map((data, index) => [
  {
    lat: data.latitude,
    long: data.longitude,
  },
  data.name,
  index + 1,
]);

console.log("transformedData", transformedData);

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

Initializing data in VueJS for objects that do not already exist

I'm currently using Ajax to populate data properties for multiple objects, but the properties I want to bind to don't exist at the time of binding. For example: <template> <my-list v-bind:dataid="myobject ? myobject.data_id : 0">& ...

javascriptajaxvue.jsvuejs2

Simple guide to identifying when the content of a dropdown option changes using jQuery

I am seeking a solution for detecting changes in the options of a dropdown field that are updated dynamically. Is there a method to capture an event each time the set of options within the dropdown is modified? I am not looking to track individual option ...

javascriptjqueryhtmlevents

Accessing identical values from various arrays

I have two arrays, each containing 3 values. I need to randomly select 2 values from each array. For example, selecting "red" and "blue" from array 1, and "red" and "blue" from array 2. The goal is to randomly match the keys from both arrays and change the ...

phparraysrandom

What is the best library to utilize for uploading an Excel file in a React application?

As a beginner in JS and React, I have a simple question that I hope someone can help me with! I am trying to figure out how to upload an excel file using a form and then extract the data from the rows and columns. For example, I would like to calculate th ...

javascriptreactjs

Encase an asynchronous function inside a promise

I am currently developing a straightforward web application that manages requests and interacts with a SQL database using Express and Sequelize. My issue arises when I attempt to call an async function on an object, as the this part of the object becomes u ...

javascriptnode.jsexpress

Retrieve JSON data from a WebApi controller by utilizing the Included properties

I'm looking to modify my Web Api 2 controller to return JSON, but I've encountered an issue with Included properties. Here is my current get method: [System.Web.Mvc.HttpGet] public IQueryable<Employee> GetEmployee() { return db.Employe ...

asp.netjsonentity-framework

Tips for retrying an insertion into the database when a duplicate unique value is already present

After thorough searching, I couldn't find any existing patterns. My goal is to store a unique key value in my MySQL database. I generate it on the server side using this code: var pc = require('password-creator'); var key = pc.create(20); ...

javascriptmysqlnode.jsunique-key

A secure method for dynamically adding a JavaScript file

In my lang folder, I store language variables for a website. To dynamically include the desired file based on the user's language selection, I use session variables. For example, if the user selects English, 'en' is stored in the lang variab ...

javascriptphpjqueryajaxsession

When attempting to integrate Bootstrap 5 with Laravel, you may encounter an issue where the "bootstrap is

I've come across a common issue where none of the solutions seem to work for me. Currently, I am working with Laravel 10 and Vite, and have successfully installed Bootstrap using NPM. Although the configuration was correct for using Bootstrap CSS and ...

javascriptlaravelnpmbootstrap-5vite

Encasing newly inserted child components within my designated slot

If I have a component with a single slot and instead of simply rendering all its children, I want to wrap each element individually, the following approach can be taken: Vue.component('MyElement', { render: function(createElement){ for (l ...

javascriptvue.jsvuejs2vue-render-function

The screen reader is only able to detect the JQuery dialog box located at the bottom of the page

I am facing an issue with three jQuery dialog boxes on my website. Two of them work perfectly fine, where a screen reader reads the content as soon as they open. However, the third one, named surveyDialog, is only read at the very end after reading everyth ...

javascriptjquerydialogwai-ariasection508

Please ensure that all fields in the form are filled out before clicking the enable button

Is it possible to enable the button only when all fields are filled out in a form? It's easy if there's just one field, but I have multiple fields with a select field as well. I'm not sure how to do this. Here's the form I've creat ...

javascriptreactjsmaterial-ui

Optimizing Load Times for Twitch.Tv API in CakePHP

Currently, I am working on the following code snippet: public function fetchUser($username) { $result = array(); $data = array(); $httpSocket = new HttpSocket(); $url = $this->baseUrl . $username . $this->apiKey; ...

phpjsoncakephp

EJS: Is there a way to display multiple populated collections from mongoose in EJS file?

Having trouble rendering multiple populated collections from mongoDB in EJS. To provide more context, I'll share snippets of my code: models, routes, and views. Model Schema var mongoose = require("mongoose"); var playerSchema = mongoose.Schema({ ...

javascriptnode.jsexpressmongooseejs

Activate a spinner when a button is clicked within a row of an antd table

I created a table with a column that includes a button like the one below: const columns = [ ... { title: "button", dataIndex: "key", render: (text, record) => { return ( <Button icon={<Del ...

javascriptreactjsnext.jsantd

Exploring the use of jQuery's .filter() method to showcase JSON data

I am currently working on a webpage that includes images, details, and a search input option using JSON objects. The issue I'm facing is that the search function does not yield any results, even though the data from the JSON object displays correctly ...

jqueryjson

Leveraging Express Mergeparams in TypeScript

I've run into an issue while working on my small project in Typescript. The problem arises when I attempt to nest my router, as Typescript doesn't seem to acknowledge the parent's parameter. Within the "child" file, I have the following cod ...

typescriptexpress

Aligning PlaneGeometry with the dimensions of a texture image

Is there a way to prevent a PNG image texture from being stretched on a Three.js planeGeometry that is larger than the original image size? Can the geometry be automatically sized to fit the image texture, or at least avoid stretching? Instead of saving t ...

javascriptthree.jstextures

Ways to hide notifications by setting a timer while keeping the delete option visible

Presently, this is the code I am working with using Javascript and Vue.js. I have an array called Messages.length that contains messages. When the x button is clicked, it triggers the "clearMessages(item)" function on the server side. However, I also aim ...

javascriptvue.js

An issue has occurred in Angular pipe: TypeError - array.map is not functioning as expected

I encountered the following error: ERROR TypeError: array.map is not a function, while using this angular pipe. Here is the code snippet: export class CharacterWithCommasPipe implements PipeTransform { transform(array) { return array.map(item => ...

javascriptangularangular8angular-pipe