Iterate through JSON data and access values based on keys using a $.each loop

I have retrieved JSON data from the controller using AJAX and now I want to access this data. The data is in the form of a list of objects (array) with key-value pairs, so I am planning to use .each() function to go through all the data. The array looks like this:

[{"filePath":"Desktop.zip","fileStatus":"Uploaded"},{"filePath":"Desktop\\dates.xml","fileStatus":"Uploaded"}]

Here is the code snippet:

$.ajax({
    url: '@Url.Action("GetFilesNames", "Home")',
    type: 'POST',                    
    success: function (data) {                      
        $.each(data, function (value) {
            console.log(value['filePath'], value['fileStatus']);
        });
    }
});

https://i.sstatic.net/CUbZt.png

However, the value for each data entry is coming out as undefined.

I have tried logging all the data, stringifying it, parsing it (which resulted in errors), and even converting the stringified version into an object. But no matter what I try, when using .each(), the result remains undefined.

https://i.sstatic.net/T31eD.png

Answer №1

Take a look at the guide for using jQuery.each:

callback
Type: Function( Integer indexInArray, Object value )

Now review your code:

$.each(data, function (value) {

You are attempting to access properties from the first argument, which is an Integer (the index in the array() and not the value. You should retrieve properties from the second argument.

 $.each(data, function (index, value) {

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

Enhance the functionality of selectize.js by incorporating select options through ajax

I'm currently working on implementing options to a select box using AJAX and selectize.js. When not using selectize.js, everything functions correctly. The two select boxes are interconnected so that when one is updated, the values in the other select ...

Revamp the style of the date field in a Material UI dialog

I'm currently working on a React project where I am using Material-UI's date picker component to display date items. However, I find that the default style does not meet my requirements. I would like to use a selector for displaying dates in the ...

Swap out the string variable when it is modified

To generate a string inside the "code" variable that combines the selected image values, the final code should appear similar to: "test1/A=1a/B=1b" or "test2/A=1b/B=1a", etc. If the user modifies icon "A," it should replace the value in the code instead of ...

Exploring the implementation of the meta robots tag within Joomla 2.5's global settings

Encountering a peculiar issue with Joomla 2.5 and the Meta robots tag. Joomla seems to have a flaw where regardless of the URL, as long as there is a valid article id, it will generate a page. For instance: The id '61' is valid but leads to a ...

Encountering a syntax error with JSON.parse() when using MVC 4 Razor with Jquery Ajax

I am encountering an issue with my MVC 4 application login page. I am attempting to utilize a jQuery ajax request to my login controller to check if the user exists. Here is the snippet of my jQuery code: $(document).ready(function () { $("#btnSub ...

What is the best way to conceal two Bootstrap divs that should not both be visible at the same time?

I am working with two different types of charts: an Emotion chart and a Polarity chart. To control the visibility of these charts, I have implemented two buttons, one for each chart. The functionality is such that when the first button is clicked, only the ...

Manipulating object properties within an array through iteration

Here is the array I am working with: var data = [ {"firstname":"A","middlename":"B","lastname":"C"}, {"firstname":"L","middlename":"M","lastname":"N"}, {"firstname":"X","middlename":"Y","lastname":"Z"} ]; I need to update the values for all keys - firstn ...

Issue with parsing string data from API call in Angular (Web Core 3)

Controller code: [Route("api/[controller]")] [ApiController] public class CustomController : ControllerBase { ApplicationDbContext dbContext = null; public CustomController(ApplicationDbContext ctx) { dbContext = ctx; } ...

Display numerous occurrences of a certain class by utilizing a different class

I'm currently in the process of creating a board game similar to Ludo, which requires a grid of 13x13 squares. I've created a Box class that successfully renders a single square button. Here's the code: class Box extends React.Component{ r ...

The element type provided is not valid: it should be a string (for built-in components) or a class/function. Utilizing SSR with Node.js, React, and React-

Playground: https://codesandbox.io/s/focused-dream-ko68k?file=/server/server.js Issue Error: Encountered an error stating that the element type is invalid. It was expecting a string or a class/function, but received undefined instead. This could be due ...

Converting JSON structure to a dataframe using Python

I have a JSON structure that I downloaded and want to reformat it into a DataFrame with the following rotated form: Date Account Amount 2019-12-31 capitalSurplus 22165000000 2019-12-31 totalLiab 2253070000 ...

The NPM START ERROR message is indicating a problem with locating a file in npm

Having an issue with npm while trying to set up a basic server using node.js. Hello network! I've searched through forums, videos, and articles for solutions, but none have resolved my problem. The error message indicates that the package.json file ...

Detecting when the "enter" key is pressed using Jquery instead of relying on a mouse click

One issue I am facing is that jQuery is detecting the "enter" key press instead of mouse clicking on the submit button when trying to submit a form. The submit button works fine on the first attempt, but after that it only responds to the "enter" key. He ...

Unlock the navigation tab content and smoothly glide through it in Bootstrap 4

Hey there, I have managed to create two functions that work as intended. While I have some understanding of programming, I lack a background in JavaScript or jQuery. The first function opens a specific tab in the navigation: <script> function homeTa ...

Ways to change attributes of deeply embedded objects?

Imagine having a complex object with nested properties like this: const obj = { Visualization: { Lower: [{ name: "Part", selectedValue: "60-000" }], Upper: [{ name: "Part", selectedValue: "60-000" }], ...

The transfer of JSON data to PHP through AJAX is not successful

I have encountered an issue while attempting to send a JSON string to a PHP file using ajax. The problem lies in the variable I am posting not being delivered when employing the JQUERY ajax method as illustrated below: <DOCTYPE html> <html> ...

Getting started with Next.js, only to hit a dead end with a

After spending a week working on Next.js, I decided to test it outside of the development setup. Despite encountering some bugs, I was able to build and start it without any errors. However, when I tried to access http://localhost:3000, I received the foll ...

Learn the process of utilizing AJAX to upload files in CodeIgniter

I have reviewed several solutions How to upload files using ajax in codeigniter File uploads in codeigniter through ajax but none seem to work with my specific code. I am trying to implement a feature where users can upload various types of files (such ...

Utilize PHP (MVC) AJAX to post and showcase information within a single webpage

I'm currently working on a project where I need to post input data and display it on the same page using AJAX. However, I am having trouble understanding how to implement this with MVC architecture since I am new to MVC. If anyone could provide some g ...

What is the proper format for a PHP file in order to store a file sent via a jQuery ajax POST request?

As a newbie, I'm facing a challenge with something relatively simple (or so I thought). My struggle involves writing a JSON or more precisely GeoJSON object to a file using jQuery AJAX. Here is my current approach: $.ajax({ type: 'PO ...