Arrange JSON elements in ascending order within a for loop before displaying them according to a specific value

I've been dedicating myself to learning JavaScript for the past month, and I'm currently working on a web page project for educational purposes. However, I've hit a roadblock when it comes to displaying data based on the top 10% and bottom 10% of values. I have everything set up on Repl.it, you can find the link here: https://repl.it/@YevgeniyMakkoye/Task2-RE

The specific page I'm referring to is located in assets/js/getAttendance.js

Below is the code snippet that I am currently using:

  var filteredMembers = [];
  actove = true;
  while (filteredMembers.length / jlen < 0.1 ||
  !filteredMembers.length) {
    for(let member of members){
      filteredMembers.push(member);
    }
    for (let i = 0; i < arrMemberVotes.length; i++) {
      if (arrMemberVotes[i] === arrMemberVotes) {
        arrMemberVotes.splice(i, 1);
      }
    }
    console.log(maxMinCalc(arrMissedVotes, false));
    console.log(filteredMembers);
  }

Beneath this code, you'll also find some alternative logic that I've been experimenting with. I'm looking to figure out how to display a table showing the percentage of missed votes.

In the fetchData.js file, you'll see instances where dataSenate/dataHouse are connected directly to JSON as JavaScript Objects.

function getSenate() {
  json = dataSenate,
    json = json.results[0],
    jlen = json.num_results,
    members = json.members;
}

function getHouse() {
  json = dataHouse,
    json = json.results[0],
    jlen = json.num_results,
    members = json.members;
}

//GET ALL DATA:
function getData(counter) {
  memberParty = members[counter].party;
  memberState = members[counter].state;
  memberSeniority = members[counter].seniority;
  firstName = members[counter].first_name;
  middleName = members[counter].middle_name;
  lastName = members[counter].last_name;
  memberVotes = members[counter].votes_with_party_pct;
  missedVotes = members[counter].missed_votes;
  missedVotesPerc = members[counter].missed_votes_pct;
  spacer = " ";
  fullName = firstName.concat(spacer, middleName, spacer, lastName);
  if (fullName.includes("null") == true) {
    fullName = firstName.concat(spacer, lastName)

  } else {
    fullName = firstName.concat(spacer, middleName, spacer, lastName)
  }
}

Answer №1

After much research, I have successfully found a solution. Below is the code snippet that I am currently using to sort an object based on a specific value:

var filtredDataDesc = Object.values(json.members);
  filtredDataDesc.sort((a, b) => (b.votes_with_party_pct > a.votes_with_party_pct) ? 1 : -1);
  var filtredDataAsc = Object.values(json.members);
  filtredDataAsc.sort((a, b) => (a.votes_with_party_pct > b.votes_with_party_pct) ? 1 : -1);
  var desFullName = [];
  var ascFullName = [];


  for (var i = 0; i <= 10; i++) {

    fullNameDesc = filtredDataDesc[i].first_name + " " + filtredDataDesc[i].middle_name + " " + filtredDataDesc[i].last_name;

    if(fullNameDesc.includes("null") == true){
      fullNameDesc = filtredDataDesc[i].first_name + " " + filtredDataDesc[i].last_name;
    } else {
      fullNameDesc = filtredDataDesc[i].first_name + " " + filtredDataDesc[i].middle_name + " " + filtredDataDesc[i].last_name;
    }

    fullNameAsc = filtredDataAsc[i].first_name + " " + filtredDataAsc[i].middle_name + " " + filtredDataAsc[i].last_name;
    if(fullNameAsc.includes("null") == true){
      fullNameAsc = filtredDataAsc[i].first_name + " " + filtredDataAsc[i].last_name;
    } else {
      fullNameAsc = filtredDataAsc[i].first_name + " " + filtredDataAsc[i].middle_name + " " + filtredDataAsc[i].last_name;
    }
    globalVariables();

    topTarget.innerHTML += oTr + oTd + fullNameDesc + cTd + oTd + filtredDataDesc[i].missed_votes + cTd + oTd + filtredDataDesc[i].votes_with_party_pct + cTd + cTr;
    bottomTarget.innerHTML += oTr + oTd + fullNameAsc + cTd + oTd + filtredDataAsc[i].missed_votes + cTd + oTd + filtredDataAsc[i].votes_with_party_pct + cTd + cTr;

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

Embed an external website within a div element

Is there a way to embed an entire external website onto another site, without scroll bars or borders? I attempted this method but the entire page did not load, and there were still scroll bars and borders present. <!DOCTYPE HTML> <html> <b ...

Ways to retrieve live data from vuex state directly into a component

I am currently delving into the world of Vuex, but I believe there are some fundamental concepts that I may be missing. Any suggestions or insights would be greatly appreciated. Currently, I am dispatching the scale value of a zoomable map from one compon ...

Use an Ajax call to "POST" and fetch the Jade layout for rendering

So, I have my own custom AJAX function. export function dynamicURL(obj) { $.ajax({ url: obj.url, type: 'post', data: obj.jade, dataType: 'JSON' }).done(function (ajaxReturn) { console.lo ...

Concatenate data received from PHP to a JavaScript variable and return it

In my current app development project, I have the following code snippet. The variable valdat is sent to a specified URL, processed through a PHP file, and then returned to the app. How can I add the data displayed in the alert message to another variabl ...

Transferring user information from Node.js server to Angular upon successful login

Attempting to login my user through Facebook using PassportJS and passing the user data to Angular has been a challenge. On the server side, everything seems fine with the code for the Facebook callback in the users controller: exports.facebookCallback = ...

What is preventing this Javascript from running in Firefox and Chrome?

I recently encountered an issue with some Javascript code that functions correctly in Internet Explorer, but fails to work on Mozilla Firefox or Google Chrome. Any insights as to why this might be the case? function returnData(strCode,strProgramCode,strNa ...

Click the "Add" button to dynamically generate textboxes and copy the contents from each

I am working on a project where I have an Add button and 6 columns. Clicking on the Add button generates rows dynamically, which can also be deleted. My challenge is to copy the content of one textbox into another in 2 of the columns. This copying function ...

Executing statements within a loop sequentially in jQuery: Best practices

I'm working on developing a program that will display different images in a loop when clicked. To achieve this functionality, I implemented jQuery to trigger a function upon clicking an image, which then cycles through all the images by updating the " ...

Ways to retrieve information from the object received through an ajax request

When making an AJAX request: function fetchWebsiteData(wantedId) { alert(wantedId); $.ajax({ url: 'public/xml/xml_fetchwebsite.php', dataType: 'text', data: {"wantedid": wantedId}, typ ...

React component fails to display content following execution of Jquery Ajax request

Utilizing a basic jQuery ajax function to retrieve inline HTML code from an API $.ajax({ url: url, headers: { 'Accept': 'application/javascript' }, dataType: 'html', beforeSend: function(){ $('.load-mor ...

What is the alternative method of invoking a function within another function in React Native without utilizing a constructor?

Within my RegisterTaster function, I need to execute another function called endRegisterAlert. Since I'm not using a constructor and instead treating the class as a const in React Native, how can I achieve this? What is the best way to call the endRe ...

Adding HTML created by PHP to a document fragment

I am trying to add a large amount of HTML generated by PHP (5000 div elements) to a document fragment and then append it to the body of the page. Here is an example of the HTML: <div itemscope itemtype="http://schema.org/Article"> <link itemprop ...

Tips for accessing an Element by its Id in Vue

I am trying to access an external Element in Vue by using the method getElementById(): new Vue({ el: "#vue", data: { helloElement: document.getElementById('hello') } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/v ...

Rapidly iterating through vectors within a multidimensional numpy array

In my project involving python, numpy, and cython, I am currently working on optimizing an iteration process over arrays. Specifically, I am looking for the most efficient and elegant method to perform the following type of iteration: Assuming I have a fu ...

Make the table in a bootstrap design appear with a border when you hover over a cell using the table

Looking for a solution to make the border work as expected when hovering over each td in a table like this example: https://jsfiddle.net/nmw82od1/ Here is the CSS code: .table1 td:hover { border: 1px solid black; } .table2 td:hover { border: 1px do ...

Utilizing JSON to transfer information to a React component displaying an Apexchart timeline

I am trying to create a dynamic timeline using Apex Chart by loading data from a JSON file. The demo with hardcoded data can be viewed here. Here is an example of how my data.json file is structured: [{ "name": "Booked", ...

Guide to accessing web API in WPF version 4.0

I need to make a call to a web API using my WPF 4.0 application, where the API expects requests in JSON format and sends responses in JSON format. I found a solution to calling a web API in WPF 4.5 on this page http://www.asp.net/web-api/overview/web-api- ...

extract varying elements into a unified array

I need help with pulling dynamic elements into a single array, but the result is not displaying correctly. For example: $array = array(); $element = "'abc1', 'abc2'"; $array = array('abc', $element); // My desired result s ...

Arranging the Awk array based on last names

My script begins with a list of campaign contributors, noting that individuals who donate $500 collectively are eligible for a contest. I have created an array to store the names of those who meet this criteria by assigning each one an incrementing index. ...

What is the best way to convert JSON data (retrieved from a list) into individual columns using Python?

I'm struggling with this pandas dataframe that contains sales metrics by ASIN. asin salesMetricsByAsin 0 B001U81442 [{'reportingDate': '2021-01-20', 'salesMet ...