I am having trouble retrieving the array value from the response sent by my server

After receiving a dictionary from my server, when I try to access the values using the following code:

{"filters":{
  "Facture": [
    "Магма (Тычок)",
    "Тонкий кирпич",
    "Гладкий",
    "Крафт",
    "Магма"
  ],
  "Color": [
    "Беж",
    "Черный",
    "Амстердам",
    "Лондон Брик",
    "Мюнхен",
    "Сити Брик"
  ],
  "Name": [
    "Облицованный кирпич стандартный пустотелый",
    "Тонкий колотый с ф. 180/11"
  ]
}}

The console returns undefined. Despite trying various approaches like changing the data sent by the server or modifying the code for accessing the values, I couldn't figure out a solution.

Interestingly, creating the object within the script works correctly, but utilizing the object received in the response fails.

javascriptjsonajaxjsp

Answer №1

Update this line:

const myObj = JSON.parse(response);

to

const myObj = JSON.parse(response).filters;

as it appears that the desired values are stored within the filters property.

Revised

Interestingly, upon closer inspection, it seems that the server actually returned ""{...}"" instead of just {...}, hence we had to double parse it:

const myObj = JSON.parse(JSON.parse(response)).filters;

If possible, a more ideal solution would be to address this issue on the server or backend side.

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

The custom tooltip is not being displayed as intended

I'm currently working on customizing tooltips in angularjs google charts. My goal is to display multiple series data along with some text within the tooltip, similar to the demo showcased here. Specifically, I aim to include the legend and title of th ...

javascriptangularjschartsgoogle-visualization

pythonWhy is textwrap giving unexpected results when formatting in JSON?

>>> a = '{"key1": "aaaaaaaaaaaaaaaaa", "key2": "bbbbbbbbbbbbbbbbbbbbbbbb"}' >>> len(a) 64 >>> textwrap.wrap(a, 32, drop_whitespace=False) ['{"key1": "aaaaaaaaaaaaaaaaa", ', '"key2": ', '"bbbbbbb ...

jsonpython-3.xword-wrap

Steps for transferring data from one flatlist to another (an array of objects) within the same page featuring identical data:

const DATA = [ { car_name: 'Ford', model_number: '2021 . 68 - 1647', full_tank: false, suggestion: [ { price: '$2.50', type: 'Oil Top up&apos ...

javascriptreactjsjsonreact-nativeflatlist

Can someone explain why the console.log(items) command seems to be executing twice

Item.find() .then(function (items) { if (items.length === 0) { Item.insertMany(defaultItems) .then(function () { console.log("Successfully Saved"); }) .catch(function (err) { console.l ...

javascriptnode.jsmongodbexpressmongoose

Intermittent connectivity issues causing clients to miss messages from Nodejs server

Currently, I am in the process of setting up a basic node application where visitors can interact with a letter counter on the site. The idea is that every time someone presses a letter, the counter will increase and all users will be able to see it go up ...

javascriptnode.jsclientbandwidth

What could be causing issues with my jQuery POST call?

I am attempting to establish authentication with a remote service using jQuery. Initially, I confirmed that I can accomplish this outside of the browser: curl -X POST -H "Content-Type: application/json" -H "Accept: appliction/json" -d '{"username":" ...

javascriptjqueryajaxpost

How is it that a callback function can successfully execute with fewer arguments provided?

Code I'm really intrigued by how this code functions. In the verifyUser function, it passes a callback function as the fourth argument to the verifyToken function. However, upon examining the verifyToken function itself, I noticed that it only has th ...

javascriptexpresswebcallbackbackend

What causes the left click to not trigger in Kendo's Angular Charts?

My homepage features a simple bar chart that displays correctly, but I am having trouble capturing the left click event (the right click works fine). This is an example of code from my template: <kendo-chart *ngIf="(dataExists | async)" [ ...

javascriptangularkendo-ui

"Track the upload progress of your file with a visual progress

I have written this code for uploading files using Ajax and PHP, and I am looking to incorporate a progress bar to indicate the percentage of the upload. Here is the code snippet: <script> $("form#data").submit(function(){ var formData = new ...

javascriptajax

There seems to be an issue with displaying the meta information in a Nuxtjs project using this.$

I am facing an issue with meta information in a Vue page. When I try to access "this.$route.meta", it does not display any meta information. However, when I inspect the Vue page element, I can see that there is indeed meta information present. How can I ...

javascriptvue.jsnuxt.js

What is the correct way to handle JSON responses with passport.js?

In my Express 4 API, I am using Passport.js for authentication. While most things are working fine, I have encountered difficulty in sending proper JSON responses such as error messages or objects with Passport. An example is the LocalStrategy used for log ...

javascriptmongodbexpressauthentication

Calculate the total length of the nested arrays within an object

Check out this object: const obj = { name: "abc", arr: [{ key1: "value1", arr1: [1, 2, 3] }, { key1: "value2", arr1: [4, 5, 6] }] } I'm looking to find a way to quickly calculate the sum of lengths of arrays arr1 and arr2. ...

javascriptnode.js

Including a JavaScript file in an HTML document initiates a server request, which can lead to potential errors

I am currently developing a web application using Express and Node.js on the backend, with EJS as the templating engine on the frontend. Here is a snippet of my app.js file: app.get('/book/:id', (req, res)=>{ var book_id = req.params.id; cons ...

javascripthtmlnode.jsexpressejs

Combine filter browsing with pagination functionality

I came across a pagination and filter search online that both function well independently. However, I am looking to merge them together. My goal is to have the pagination display as << [1][2] >> upon page load, and then adjust to <<[1]> ...

javascriptjqueryfilterpagination

The perpetual cycle of redirection through middleware

Implementing straightforward middleware logic and encountering Encountered an infinite redirection in a navigation guard when transitioning from "/" to "/login". Halting to prevent a Stack Overflow. This issue will cause problems in p ...

javascriptvue.jsvuejs3

"Flask gets stuck just before returning jsonify, resulting in a lack of output (error message

As a new developer, I have created a page that checks if the user is logged in on load. If the user is logged in, it replaces the login forms with data from the server. However, if the user is not logged in, it displays the login forms and waits for the us ...

jsonajaxpython-3.xflashflask-login

Show a continuous flow of images on the screen without needing a webpage refresh, providing the user with a seamless video

I'm working with a servlet that generates a series of images, and I'm looking for a way to display them on a JSP page without refreshing the entire page. I was considering using applet or AJAX, but I'm still searching for a more convenient s ...

javaajaxapplet

Identify and sort JSON objects based on keys with multiple values

My JSON file contains objects structured like this: [ { "name" : "something", "brand": "x", "category" : "cars" }, { "name" : "something2 ...

javascriptjson

Utilizing external functions in Node.js by importing them from different files

Struggling to import methods from my ./db/index.js into my server.js file in order to retrieve data from the database and show it. The content of /db/index.js is as follows: 'use strict'; const pgp = require('pg-promise')(); const pg ...

javascriptnode.jsherokupg-promise

Uploading a file to a .NET Framework API Controller using React

I am trying to figure out how to send files in the request body to an API controller in .NET framework using React. My goal is to achieve this without changing the request headers, so I want to send it as application/json. What I am looking for is somethi ...

javascriptc#.netreactjs.net-4.8