Using Nested Arrays to Create Search Filters with Query Parameters

Question

Using Nested Arrays to Create Search Filters with Query Parameters

Here is the data structure I am working with:

[
    {
        id: // the field to be search
            {
                eq: '1234'  // eq is the operand; 1234 is the keyword
            }
    },
    {
        description:
            {
                like: 'desc'
            }
    }
]

What would be the best way to convert this structure (using Ember.JS) into query parameters like this:

?filter[id][eq]=1234&filter[description][like]=desc

This specific format is required by the API for the filters to be processed correctly.

javascript ember.js filter ember-data

Answer 1

Answer №1

Perhaps this is the solution you've been seeking:

const filterOptions = [
    {
        id: 
            {
                eq: '1234'
            }
    },
    {
        description:
            {
                like: 'desc'
            }
    }
];

let result = '';

filterOptions.forEach(function (item) {
  result += 'filter';

  Object.keys(item).forEach(function (property) {
    result += '[' + property + ']';
  
    Object.keys(item[property]).forEach(function (subProperty) { 
      result += '[' + subProperty + ']=' + item[property][subProperty]; 
    });
  });
  
  result += '&';
});

result = result.substring(0, result.length - 1);

console.log(result);

An alternative approach is to iterate through the array and utilize Object.keys() along with the forEach function to access the property name and value.

Answer 2

Perhaps this is the solution you've been seeking:

const filterOptions = [
    {
        id: 
            {
                eq: '1234'
            }
    },
    {
        description:
            {
                like: 'desc'
            }
    }
];

let result = '';

filterOptions.forEach(function (item) {
  result += 'filter';

  Object.keys(item).forEach(function (property) {
    result += '[' + property + ']';
  
    Object.keys(item[property]).forEach(function (subProperty) { 
      result += '[' + subProperty + ']=' + item[property][subProperty]; 
    });
  });
  
  result += '&';
});

result = result.substring(0, result.length - 1);

console.log(result);

An alternative approach is to iterate through the array and utilize Object.keys() along with the forEach function to access the property name and value.

Answer 3

Answer №2

The solution is quite straightforward. Given that the first and second elements are different, I can safely assume that this pattern will persist.

So, here is the solution:

const data = [
    {
        id:{
            eq: '1234'
        }
    },
    {
        description:{
            like: 'desc'
        }
    }
];

const [ first, second ] = data;

const queryParams = `?filter[id][eq]=${first['id']['eq']}&filter[description][like]=${second['description']['like']}`;
console.log(queryParams);

Executing this will result in:

?filter[id][eq]=1234&filter[description][like]=desc

Answer 4

The solution is quite straightforward. Given that the first and second elements are different, I can safely assume that this pattern will persist.

So, here is the solution:

const data = [
    {
        id:{
            eq: '1234'
        }
    },
    {
        description:{
            like: 'desc'
        }
    }
];

const [ first, second ] = data;

const queryParams = `?filter[id][eq]=${first['id']['eq']}&filter[description][like]=${second['description']['like']}`;
console.log(queryParams);

Executing this will result in:

?filter[id][eq]=1234&filter[description][like]=desc

Answer 5

Answer №3

In ES6 fashion.

const filters = [
    {
        id: 
            {
                eq: '1234'
            }
    },
    {
        description:
            {
                like: 'desc'
            }
    }
];


const apiUrl = '?' + filters.map(filter => {
  const majorKey = Object.keys(filter).pop();
  const minorKey = Object.keys(filter[majorKey]).pop();
  return `filter[${majorKey}][${minorKey}]=${filter[majorKey][minorKey]}`;
}).join('&');

console.log(apiUrl);
// output: ?filter[id][eq]=1234&filter[description][like]=desc

Answer 6

In ES6 fashion.

const filters = [
    {
        id: 
            {
                eq: '1234'
            }
    },
    {
        description:
            {
                like: 'desc'
            }
    }
];


const apiUrl = '?' + filters.map(filter => {
  const majorKey = Object.keys(filter).pop();
  const minorKey = Object.keys(filter[majorKey]).pop();
  return `filter[${majorKey}][${minorKey}]=${filter[majorKey][minorKey]}`;
}).join('&');

console.log(apiUrl);
// output: ?filter[id][eq]=1234&filter[description][like]=desc

Using Nested Arrays to Create Search Filters with Query Parameters

Answer №1

Answer №2

Answer №3

Similar questions

Warning: The current version of graceful-fs (3) is deprecated in npm

Mastering the correct usage of Express middleware functions in routers

Utilize React-Charts.js-2 with ChartJS to create a customized bar chart

Organizing dates with Javascript

What is the best method for incorporating jQuery code into a separate file within a WordPress theme?

Exclude a specific tag from a div in JavaScript

Tips for getting a sticky table header and including a limited number of columns, each with checkboxes or input fields

Personalizing the label of a select input using materialui

The data being retrieved from the controller in AngularJS is not displaying as expected

Javascript - Incorporate a hyperlink into my Flickr Api image query

The function view() is not displaying the CSS and JS files properly

Error not identified in ajax function for form submission

Is it possible to use next.js to statically render dynamic pages without the data being available during the build process?

Showing headings in the table vertically

Utilizing express-session and passport to initiate a new session for each request

Is it expected to conceal children who are 2 years old?

Unraveling the Mysteries of Linguistic Evolution

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

Tips for Adding or Deleting 2 Rows in a Table

Can you provide the name of the slideshow plugin used on the Wipro website?