I received a single lengthy string as a response from an API request, and now I need to convert it into an array. The string contains values that are separated by commas. Can someone suggest the most efficient method

I am currently dealing with data retrieved from an API where some keys have values formatted in a specific way. The values of these keys are structured as arrays, but the array itself contains one lengthy string. Here is an example:

      "key_one": [
        "[\"Some Value One\",\"Some Value Two\",\"Some Value Three\"]"
      ],
      "key_two": [
        "[\"Some Value Four\",\"Some Value Five\"]"
      ],

My goal is to transform this format:

["[\"Some Value One\",\"Some Value Two\",\"Some Value Three\"]"]

into this desired output:

["Some Value One","Some Value Two","Some Value Three"]

Initially, I considered using Regex for this task, but my limited experience with Regex has hindered progress. My attempt at implementing a basic for loop that searched for quotation marks and processed characters was unsuccessful and overly complex.

If anyone can provide me with a more efficient solution, I would greatly appreciate it...

Answer №1

If you're looking to convert a stringified JSON object back into an actual JavaScript object, you can use the JSON.parse method.

const data = {
  "key_one": [
    "[\"Some Value One\",\"Some Value Two\",\"Some Value Three\"]"
  ],
  "key_two": [
    "[\"Some Value Four\",\"Some Value Five\"]"
  ]
}

for (let key in data) {
  data[key] = JSON.parse(data[key])
}
console.log(data)

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

What is the best way to refresh a partial view using the Jquery .load() function?

On my page, there is a partial view within the "Attachments" div that I need to reload. I've been trying to achieve this by using the following command: $('#attachments').load('@Url.Action("Attachments" "Transactions",new {id=1297})&a ...

How can Vue JS be used to assign numbers to specific elements in an array that meet certain conditions?

Imagine having an array of objects within your Vue state like the following: [ {name: "Daniel", default: false}, {name: "Ross", default: true}, {name: "Rachel", default: false}, {name: "Joey", default: false} {n ...

Is there a way to automatically rotate an image every night at the stroke of midnight?

Looking for a way to rotate an image daily at midnight from a selection of 5-10 images. What's the best approach using JavaScript, jQuery, or PHP? ...

Angular js is failing to populate dropdown values

I'm encountering an issue with editing a user object. When clicking the edit button, some values in the form are loading correctly, but three values are not populating even though I'm receiving the data from the service. HTML < ...

Issues with AngularJS Nested ng-repeat Functionality in v1.2.1

I'm currently developing a system where I need to nest two ng-repeat statements to iterate through a 2D array. I managed to achieve this successfully using version 1.1.1, as shown here: http://jsfiddle.net/skArT/1/ However, when I tried the same cod ...

Angular and JS have differing opinions on how to determine if objects are equal

I am currently developing an application to showcase specific data using a grid and a data source. Let me present the issue first and then elaborate on the situation. $scope.onSelectRow = function (row, rowId) { var a = row; ...

Calculating the length of an array in Vue/Nuxt using a custom plugin: Watch vs Computed

I am trying to show the length of an array within my Vue component. The array is nested within a Vue plugin. Each time I initiate an API Call, I add a new element to this array located here: this.$apiCall.apiCallCache Is it possible to monitor changes i ...

Deny access to the viewing feature for unauthorized users

Objective: To restrict access to the profile page only for logged-in users. The authentication is done through mongodb and passport-local. Existing Code: Below is the express route used to verify if the request is authenticated. app.get('/loggedin ...

Deleting the last item from an array in Typescript

Consider the following array : ["one-", "two-", "three-", "testing-"] Once converted into a string, it looks like this: "one-,two-,three-,testing-" I need to remove the last character (hyphen) after 'testing' and create a new array from it. ...

Using both the variable and the JSON format from the Google Maps API

I am trying to display the coordinates from the input fields on a map using Google Maps API. However, I am facing an issue with passing the values to the script. Below is the code snippet: <input type="text" id="latitude" class="form-control" /> ...

Manipulate the way in which AngularJS transforms dates into JSON strings

I am working with an object that contains a JavaScript date, structured like this: var obj = { startTime: new Date() .... } When AngularJS converts the object to JSON (for instance, for transmission via $http), it transforms the date into a string as ...

Apply CSS styles to a group of elements retrieved from an object

How can I apply CSS properties to each element in a collection using jQuery? const cssProperties = { "color": "#555555", "font-weight": "bold", "text-align": "left" }; const $tdCollection = $("tr:first-child").find("td:nth-child(2)"); // Co ...

Is it possible to compile a TypeScript file with webpack independently of a Vue application?

In my Vue 3 + Typescript app, using `npm run build` compiles the app into the `dist` folder for deployment. I have a web worker typescript file that I want to compile separately so it ends up in the root of the `dist` folder as `worker.js`. Here's wha ...

I'm wondering if it's possible to fork an npm library in package.json and automatically trigger its build process upon installation

I am currently facing an issue with a npm dependency, such as ngx-infinite-scroll, that I am trying to fork for bug fixes. I want to include my modified version as a dependency in my application. Here is an example of how I have included it in my package.j ...

The State in the useEffect hook does not update instantly

After conducting some research, I discovered that useState operates asynchronously. However, I am still struggling to resolve my specific issue. My task involves fetching data from an API, but the state is only updated during the second render. Furthermore ...

Is it possible to access various image sizes and formats all from one centralized database location?

When it comes to sizes, there are several potential solutions that could be explored. One approach could involve using a suffix or prefix. For example: If there is just one path column in the database like 'images/example', different image sizes ...

Deleting tasks from the to-do list using Node.js and Express with EJS

Looking to implement functionality where each list item can be removed from a Node.js array by clicking on an HTML button using EJS and Express: I am considering placing an HTML button next to each list element so that the selected element can be removed ...

Creating a sleek navigation bar and sliding feature within the header of your Ionic 2

I am looking to create a sliding header for my website where the gallery hides and the navbar moves to the top as I scroll down, similar to the gif provided. Any help or ideas on how to achieve this would be greatly appreciated. Thank you. https://i.sstat ...

Anticipate that the function will remain inactive when the screen width is less than 480 pixels

Implementing Functionality in Responsive Navigation <script> document.addEventListener('DOMContentLoaded', () => { let windowWidth = window.Width; let withinMobile = 480; let close = document.getElementById('close&ap ...

Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...