Using Vue.js, you can easily convert a JSON string into a number

I need help sorting a table by both numbers and words obtained from an API. The words sort correctly, but the numbers do not. How can I convert the string values to numbers?

Here is the API call I am using:

axios.get(`/json/secciones`+ tienda +`.json`)
      .then(response => {this.userInfo = response.data;})
      .catch(e => {this.errors.push(e);});

The API returns the following data:

[
    {
      "id_store": 2,
      "id_section": 1,
      "desc_section": "MATERIALES DE CONSTRUCCION",
      "id_rule": 1,
      "sale_potential": "79413.5525190617"
    },
    {
      "id_store": 2,
      "id_section": 2,
      "desc_section": "CARPINTERIA Y MADERA",
      "id_rule": 1,
      "sale_potential": "74704.3439572555"
    },
    {
      "id_store": 2,
      "id_section": 3,
      "desc_section": "ELECTR-FONTAN-CALOR",
      "id_rule": 1,
      "sale_potential": "101255.89182774"
    },
    {
      "id_store": 2,
      "id_section": 4,
      "desc_section": "HERRAMIENTA",
      "id_rule": 1,
      "sale_potential": "36969.8901028374"
    }
]

How can I modify it to have the sale_potential values as numbers instead of strings?

[
    {
      "id_store": 2,
      "id_section": 1,
      "desc_section": "MATERIALES DE CONSTRUCCION",
      "id_rule": 1,
      "sale_potential": 79413.5525190617
    },
    {
      "id_store": 2,
      "id_section": 2,
      "desc_section": "CARPINTERIA Y MADERA",
      "id_rule": 1,
      "sale_potential": 74704.3439572555
    },
    {
      "id_store": 2,
      "id_section": 3,
      "desc_section": "ELECTR-FONTAN-CALOR",
      "id_rule": 1,
      "sale_potential": 101255.89182774
    },
    {
      "id_store": 2,
      "id_section": 4,
      "desc_section": "HERRAMIENTA",
      "id_rule": 1,
      "sale_potential": 36969.8901028374
    }
]

javascriptjsonvue.jsvuejs2axios

Answer №1

Consider utilizing the map function on the array and converting that attribute to a numerical value using the Number() constructor :

axios.get(`/json/secciones`+ tienda +`.json`)
      .then(response => {this.userInfo = response.data.map(item=>{
                                     item.sale_potential=Number(item.sale_potential)
                                          return item;
                                      });

})
      .catch(e => {this.errors.push(e);});

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

Issue with DIV height in Internet Explorer occurs only when application is accessed using server name

Encountering a unique issue specific to IE (confirmed in v8 and v9). When utilizing jquery to determine the height of a div: $('#sys_MainPage').height() In Chrome, Firefox, and when accessing using the IP address, this code returns around 26 ...

javascriptjqueryasp.nethtml

What is the best way to erase information displayed when hovering over an element using mouseout?

Whenever the user hovers over an image, an information box appears regarding that specific image. The information inside the box changes as I move over another image, but when not hovering over any images, the information box remains visible. Unfortunately ...

javascriptphpjquerycssweb

Retrieve information from Angular 2 response

In my code, I am working with 1 component and 1 service. Here is the component element : ... constructor(private requestService : RequestService) { } ngOnInit() { this.a = this.requestService.send_request(urlWebAPI); console.log(this.a); } ... ...

jsonangularpromiseresponse

Rows are not displaying in Jqgrid 3.7 when using Internet Explorer

While experimenting with ASP.NET and Jqgrid 3.7, I noticed that it works smoothly in Firefox but does not display any rows in the grid on Internet Explorer. The response received from the webservice is as follows: {"d": {"__type":"jqGrid", "tota ...

asp.netjsonoptimizationjqgridasmx

Several socket.io sessions have been initiated

I'm fairly new to working with node.js and currently attempting to set up a server using socketio to send messages to the frontend (React). However, when running the server and multiple connections are being established, I encounter the following outp ...

javascriptnode.jsreactjswebsocketsocket.io

Tips for delaying code execution until environment variables are fully loaded in Node.js/TypeScript/JavaScript

Purpose: ensure slack credentials are loaded into env vars prior to server launch. Here's my env.ts: import dotenv from "dotenv"; import path from "path"; import { loadAwsSecretToEnv } from "./awsSecretLoader"; const st ...

javascriptnode.jstypescript

Unleash the Power of Your Webpage: Instantly Engage Full

Is there a way to automatically make a webpage open in full screen mode as soon as it is loaded? Here's what I currently have: var elem = document.documentElement; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFull ...

javascripthtmlfullscreen

Integrating webpack with kafka-node for seamless communication between front

I am in the process of embedding a JavaScript code that I wrote into an HTML file. The script requires kafka-node to function properly, similar to the example provided on this link. To achieve this, I am using webpack to bundle everything together. I am fo ...

javascriptnode.jsnpmwebpack

Adding substantial sections of HTML without any adjustments

While I am working on DOM manipulation, I have encountered the need to insert large blocks of HTML. I am looking for a more efficient way to do this rather than relying on concatenation or creating a messy code structure. Consider the simple code snippet b ...

javascriptjqueryhtmlstring

Guide on setting up the Facebook Messenger customer chat SDK in Nuxt and Vue

Recently, I attempted to integrate the Facebook Messenger customer chat SDK into my Nuxt app. Potential Solution 1 (0% success): I experimented with the https://www.npmjs.com/package/vue-fb-customer-chat package but encountered issues. The package' ...

vue.jsnuxt.jsfacebook-messengerfacebook-chatbotfacebook-customer-chat

Material-UI: The call stack has exceeded the maximum range, causing an Uncaught RangeError

I am currently utilizing the Dialog and Select components offered by Material-UI in conjunction with React. Here is a quick example: import React from 'react'; import { Dialog, MenuItem, Select } from '@material-ui/core'; class Examp ...

javascriptreactjsmaterial-ui

Select the Best jQuery Package

Having a variety of packages available for selection. <div class="image-grid-item" data-search="select"> <input name="pack1" type="checkbox" style="display: none;"> </div> <div class="image-grid-item" data-search="select"> <inp ...

javascriptjquery

Animating range tick movements as the range thumb moves

My custom range input includes a span that displays the range's value and a div with multiple p elements acting as ticks. To create these ticks, I had to use a custom div because using "appearance: none" on the range hides the ticks by default. The ti ...

javascripthtmlcssanimationrangeslider

What are some effective ways to address conflicts between select2 versions 3.5 and 4.0?

Although not identical, the issue outlined in this discussion thread - https://wordpress.org/support/topic/select2-conflicting-with-acf-v5 resonates with my current predicament. In the scenario of a WordPress website with two plugins, one employing select ...

javascriptjqueryjquery-select2jquery-select2-4

Problem with validation in jQuery not being compatible with Kendo Button (sample code provided in jsfiddle)

It took me some time to figure out that the reason jquery-validate wasn't functioning in my Kendo Mobile application was because my submit button was a Kendo Button. Check out this jsfiddle for illustration: DEMO <div id="phoneApp" style="displa ...

javascriptjquerykendo-uijquery-validate

Look up HTML div tags and showcase the findings on a separate webpage

I am looking to search through multiple HTML files from a different page. I want to find text within all the divs that have a specific id, and display those divs on the search results page if they contain the matched search term. Here is an example of how ...

javascriptjqueryhtmlsearch

Tips on showcasing a JSON object containing two arrays in HTML using a pair of for loops

I am facing an issue with displaying data from two tables in my PHP script. The personal information is being displayed correctly, but the books related to each person are not showing up. I suspect that my approach might not be efficient enough for handlin ...

javascriptphphtmljson

Why is it that GetElements does not provide immediate results upon execution?

Just diving into the world of Javascript for the first time and experimenting with it on Chrome, but running into unexpected results. When I try: document.getElementsByTagName("h1") I anticipate seeing: <h1>tester h1 in body</h1> Instead, wh ...

javascriptdebugging

What is the location where Three.js establishes the default shaders for materials?

I've been attempting to locate the exact location where the fragment and vertex shaders are being assigned after creating a Three.js material, but haven't had much success. Using the ParticleSystemMaterial, I have material = new THREE.ParticleSy ...

javascriptthree.jsshader

Prevent clicking here

I'm attempting to only prevent the click event on the current item with a certain class. $(document).on('click', '.item', function() { $(".item").removeClass('is-expanded'); $(this).addClass('is-expanded'); ...

javascriptjquery