Creating a set of labels using values derived from a collection of objects

Looking for advice on how to loop through a Serialized JSON string using an ajax call in JavaScript. I have 8 labels set up and want to assign each key and value from the JSON string to a different label. Any guidance or feedback is appreciated!

I'm still new to JavaScript, so I haven't experimented much with it yet.

var obj = response.ret.SearchCriteria;

var resultJSON = obj;

var result = $.parseJSON(resultJSON);

var count = Object.keys(result).length;

for (i = 1; i < count; i++) {

  var c = $('#lbl' + [i]);

  $.each(result, function(k, v) {

    c.text(k + ' is ' + v);

  });

};

I have 6 labels set up, and each label displays the last item from the JSON array as a String.

Answer №1

It appears that the issue you are facing is related to only the last item of the JSON array being displayed in each label.

This situation arises due to c.text(k + ' is ' + v). In this case, the current text content gets replaced with every iteration of the 'each' loop. An alternative approach would be to consider the following, where the existing content is appended along with the $.each loop:

c.text(c.text() + k + ' is ' + v)

Alternatively,

c.append( k + ' is ' + v)

If my assumption is incorrect, please provide more details about your scenario so that we can offer further assistance :)

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 removal of the Lodash library from node modules is not occurring

In an effort to reduce bundle size, I made the decision to replace all lodash methods with core js methods in my Vuejs project. Despite attempting various npm uninstall commands such as: npm uninstall lodash npm uninstall lodash --save npm uninstall lodas ...

Can you please explain how to switch the focused slide by clicking on a specific slide in swiper.js?

When using swiper in centeredSlides mode with the loop option set to true, I want a clicked slide to become the centered slide in the swiper carousel. Swiper provides me with the index of the clicked slide, but how can I use it to change the centered slide ...

When running a function within a for loop in Node.js, I am unable to receive the response from the callback

Creating a simulation to log in multiple users to a web application using node.js has been my latest project. I've implemented a function called login() and utilized a for loop to simulate the login process for numerous users. However, when the maxThr ...

What is the best way to import two components with the same name from different libraries?

How can I import the Tooltip component from two different libraries without encountering naming conflicts? For example: import { Tooltip as LeafletTooltip } from "react-leaflet"; import { Tooltip as RechartsTooltip } from "recharts"; By renaming the impo ...

Is it possible for webdriver to retrieve the URL of the style sheet being utilized by a specific element?

Currently, I am working on a test scenario where I need to confirm that altering an option in a dropdown menu modifies the styling of the page. I am curious if Webdriver has the ability to retrieve the URL of the CSS document from an element. This appear ...

The Ion-button seems to be malfunctioning

I am interested in using special buttons for my ionic 1 project, specifically the ion-button feature outlined on this page: Ionic Buttons. I attempted to create a Round Button and an Outline + Round Button: <h2 class="sub-header" style="color:#4 ...

Is there a way to create a scrollable material-ui data-grid Toolbar and table columns header?

I am looking to synchronize the horizontal scrolling of my Toolbar items with the horizontal scrolling of my datagrid table items. Currently, they are scrollable independently. I would like it so that if I scroll the toolbar items, the datagrid items also ...

Problem with OnClick function in Firefox

I have implemented the following code in an external JavaScript file: $( document ).ready(function() { var elem='<img class="imgload" src="/common/images/spinLoader/transperent.png">'; $('.imgchange').append(elem); }); $(func ...

Determining whether an element possesses an attribute labeled "name" that commences with a specific term, apart from the attribute "value"

I'm planning to use distinctive data attributes with a prefix like "data-mo-". Let's say I have the following elements: <span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</ ...

Sorting through an array of JavaScript objects and aggregating the step values for matching user names

Currently, I am delving into JavaScript and facing a certain challenge that may be considered easier for seasoned developers. My goal is to iterate through an array of objects, filter out objects with the same userName, and then aggregate their steps. The ...

Tips for effectively passing generics to React Hooks useReducer

I am currently working with React Hooks useReducer in conjunction with Typescript. I am trying to figure out how to pass a type to the Reducer Function using generics. interface ActionTypes { FETCH, } interface TestPayload<T> { list: T[]; } inter ...

The chosen index in the Material Stepper feature is experiencing a malfunction

I've been busy working on a Mat-Stepper, actually two of them. I have a component that contains two ng-templates set up like this: Question: Why is my selected index not functioning as expected? Am I missing something? I know you can define [selected ...

What is the best way to convert nested key-value pairs into JSON using the Camel and Jackson library?

In my Java project, I have a situation where I need to return a map to Camel that contains nested key-value pairs. The Jackson library is able to marshal the map into JSON without any issues. For instance, if I add the following key-value pairs to a demoM ...

Barely populated React application following setup

I have been diving into React for quite some time now. However, today when I attempted to start a new project, it generated an almost empty project. My usual command create-react-app 'name-of-my-app' was used. It ran for a while and completed th ...

transforming a dictionary string into a JSON string

Is there a way to transform my dictionary into a JSON string and then back again in C#? I have a Dictionary<string,string> that I need to convert to a JSON string, and then reverse the process to get back my original Dictionary. How can this be ac ...

A guide on using key arrows in JavaScript to navigate and focus on elements

When working on my HTML project, I have a list of elements that I want to be able to select using the arrow keys. I've included my code here for reference: [http://jsfiddle.net/T8S7c/] What I'm trying to achieve is when the arrow keys are press ...

Exploring the power of Reactjs and managing server-side data

As a newcomer to the world of Javascript frameworks, I am on the lookout for the perfect framework for my upcoming projects. Up until now, I have been developing simple applications using the MVC framework Django with Bootstrap for the frontend. I apprecia ...

Is it possible to use Javascript to retrieve a variable from a remote PHP file?

I am trying to retrieve a variable from a remote PHP file using JavaScript in my phonegap application. The same origin policy doesn't apply here, so I believe I need to use JSON/AJAX for this task. However, I have been unable to find any tutorials tha ...

Tabulate the number of items in an array based on the month and

I have received JSON data with dates indicating the creation time of multiple parcels. I want to analyze this data and calculate the total number of parcels created in each month. I am new to this process and unsure about which thread on Stack Overflow can ...

Tips for retrieving arguments within a method called from a template in vue.js?

Here is an example where I am attempting to call a method from the template and pass in some arguments. How can I access those arguments from within the method? Snippet from script: methods: { showBinaries(job, id) { let test_url = process.en ...