The sorting function in Vue.js, _.orderBy, seems to be having trouble sorting

UPDATE This is the json data retrieved through an API using axios.

 bannerData= [
        {
          "id": 118,
          "title": "Geruchsbel\u00e4stigung",
          "location": "DOR",
          "pressInformation": [
            {
                "id": 257,
                "title": "Chemi257"
              },
              {
               "id": 256,
               "title": "Chemi256",
              }
          ]
        },
        {
          "id": 144,
          "title": "Testing Stage",
          "location": "LEV",
          "pressInformation": [
            {
              "id": 254,
               "title": "Chemi254",
            },
            {
              "id": 261,
               "title": "Chemi261",
            }
          ]
        }
      ]
computed: {
    orderedUsers: function() {
      this.secondSubBanner = [];
      for (let i = 0; i < this.bannerData.length; i++) {
        this.subBanner = this.bannerData[i].pressInformation;
        for (let j = 0; j < this.subBanner.length; j++) {
          this.secondSubBanner.push(this.subBanner[j].id);
          console.log(this.secondSubBanner); // output: 257, 256, 254,261
        }
      }
      return this.secondSubBanner;
    },
sortedArray() {
      let v = this.orderedUsers.sort();
      console.log(v); // output: 254, 256, 257, 261
      return _.orderBy(this.bannerData, v)
    }

sortedArray prints the id's in order using sort(), but it doesn't properly order the Json properties depending on _.orderBy(). Can someone point out my mistake?

Answer â„–1

Check out this algorithm that could suit your needs without the need for lodash. By simply using the flatMap() and sort() functions available, you can achieve the desired outcome:

function sortedArray(bannerData) {
  const array = bannerData.flatMap(x => x.pressInformation)
  return array.sort( (a,b) => a.id - b.id )
}

bannerData = [
  {
    "id": 118,
    "title": "Geruchsbelästigung",
    "location": "DOR",
    "pressInformation": [
      {
        "id": 257,
        "title": "Chemi257"
      },
      {
        "id": 256,
        "title": "Chemi256",
      }
    ]
  },
  {
    "id": 144,
    "title": "Testing Stage",
    "location": "LEV",
    "pressInformation": [
      {
        "id": 254,
        "title": "Chemi254",
      },
      {
        "id": 261,
        "title": "Chemi261",
      }
    ]
  }
]

console.log(sortedArray(bannerData))

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

Retrieve the file using React and receive it through Express

Despite trying several solutions on SO, none have been successful for me thus far, so I kindly ask for your patience. In React front-end, the user initiates a file download request with some variables to the backend: const data = text.value; fetch(" ...

Having trouble with installing node-steam on your node.js server?

I recently attempted to install node-steam and encountered a significant error. Can anyone provide guidance on how to resolve this issue? Is the mistake on my end? ... gyp ERR! configure error gyp ERR! stack Error: Can't find Python ex ...

Encountering an issue with compiling Angular due to a Type Inference error

interface Course { name: string; lessonCount: number; } interface Named { name: string; } let named: Named = { name: 'Placeholder Name' }; let course: Course = { name: 'Developing Apps with Angular', lessonCount: 15 }; named = ...

How can one access a specific element by its id that is located within an ng-template in Angular 6?

I have a question regarding accessing a button element inside an ng-template tag using its id in the TypeScript file. How can I accomplish that without encountering undefined errors? This is what I have tried so far: HTML <ng-template #popup > ...

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

My current time zone is GMT+8, and the AWS region I am using is Singapore (ap-southeast-1). I am facing an issue where there are discrepancies in date calculations between my local machine and when I deploy my code on AWS Lambda. My goal is to ensure that ...

Avoid the problem of animations triggering twice when clicking

Hey there, I am facing an issue with my slider. If you could take a look at this website , you will notice that after clicking on the arrows, the slider behaves asynchronously. It changes speed rapidly at times and then slows down, repeating this pattern ...

Creating a Vue application utilizing a function with an unspecified purpose

Looking to create an app with a function that is currently undefined. On the production server, there is a function called __doPostBack which I am calling from my Vue app like this: getLabel(templateName) { __doPostBack(templateName, ""); } Afte ...

Trouble with displaying an array of React elements in the render() function

While learning React by creating sample projects with Meteor, I've managed to grasp the basics but hit a wall. I'm utilizing a Twitter API to fetch the latest three tweets from the BOINGBOING Twitter page. The API is functional, and I can succes ...

Open a JavaScript file to retrieve data from a nearby JSON object

I've been trying to access a local JSON file using a JavaScript file, but for some reason it's not working. Even though I'm sure the URL is correct, the code keeps failing to retrieve data from the JSON object. JavaScript file: var pieData ...

The most efficient method for handling a vast amount of data in NodeJS

My database consists of 4 million numbers and I need to quickly check if a specific number exists in it. Example of the database: [177,219,245,309,348,436,...] I initially tried using a MySQL table for this task, but it took a lengthy 1300ms just to chec ...

Is there a proper method for populating an HTML text with values from a form?

As a newcomer, I could really use some guidance here :) I'm trying to populate text with various words, numbers, and calculation results from a form. This is my initial attempt for just one field/word, and it appears to be functioning correctly. Do y ...

Increase the gap between the legend and the chart when utilizing charts.js

I'm currently working on a project using charts.js and running into a slight issue. The legend for my bar chart is overlapping with the values displayed. I've been attempting to troubleshoot this problem without much success so far, so I would g ...

Tips for preventing window.location from becoming relative to the file

Despite my best efforts, I couldn't figure out why this issue was occurring or how to resolve it. Here is the code in question: window.location.href=("www.google.com"); The intended functionality of this code is to redirect to google.com, but inst ...

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

On my create operation page, I have a form with two fields. When I reload the page using window.reload in code, I can see updates in the form. However, I want to trigger a refresh on the form by clicking a button. I need help writing a function that can r ...

Ways to verify and incorporate https:// in a URL for a MEAN Stack application

When extracting the URL from API data, my code looks like this: <div class="row copy-text"> <a href="{{copy.Url}}" target="_blank" style="text-decoration: underline !important;">{{copy.Title}}</a> </div> I am interested in ve ...

Using jQuery and AJAX manipulates the value of my variable

My AJAX request seems to be causing jQuery to change the variable that is passed to it. Here is the JavaScript code: <script type="text/javascript"> function ResolveName(id) { $.ajax({ url : 'resolvename.php', ...

What sets npm install apart from manual installation?

I've been exploring requirejs recently. I'm trying to decide between installing it using npm install requirejs or manually downloading it from the website. Are there any differences between the two methods? Are there any advantages or disadvantag ...

The download functionality in HTML5 is not functioning properly, so users are forced to rename files when downloading

For weeks, I've been struggling to change the name of the downloaded file. Despite my efforts, instead of being named Chrysanthemum.jpg, it ends up as a hash of the file like 241693260.jpg In my backend setup, I utilize Node.js and Express.js for man ...

What is the best approach for designing a UI in Angular to showcase a matrix of m by n dimensions, and how should the JSON format

click here for a sneak peek of the image Imagine a matrix with dimensions m by n, containing names on both the left and top sides. Remember, each column and row must be labeled accordingly. ...

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

In my application, I have a canvas that dynamically adjusts its CSS size based on the window size. The main gameplay loop in my code looks like this: run = function(){ console.log(timerDiff(frameTime)); game.inputManage(); game.logics(); ...