Generate strings based on the array from backend - Javascript

Question

I want to generate this kind of structure based on the data which I am getting from server. The array looks like this

this.topics = [{
  "name": "beauty",
  "selected": false
}, {
  "name": "career",
  "selected": false
}, {
  "name": "childcare",
  "selected": false
}, {
  "name": "crafts",
  "selected": false
}, {
  "name": "culture",
  "selected": false
}, {
  "name": "fashion",
  "selected": true
}, {
  "name": "finances",
  "selected": true
}, {
  "name": "fitness",
  "selected": false
}, {
  "name": "food",
  "selected": false
}, {
  "name": "health",
  "selected": false
}, {
  "name": "home",
  "selected": true
}, {
  "name": "personal",
  "selected": false
}, {
  "name": "relationships",
  "selected": false
}, {
  "name": "religion",
  "selected": false
}]

So I want to send request with those topics which are selected in this format.

{{ base_url  }}/listings?num_items=1&start=3&topics[]=food&topics[]=home

This is what i want to add &topics[]=food&topics[]=home, so from this.topics I need to take selected: true and take name and add in that topics[]

Can you please add the data with the question? Do you want to parse the backend data and get this array of objects? Please elaborate! — Harshit Pant, Aug 13 '18 at 16:02
I didn't try yet anything, honestly I don't know what to do and I need help. You have data here which is this.topics, I just want to get from array objects which have selected: true and make a string for request — Krešimir Galić, Aug 13 '18 at 16:04

31piy · Answer 1 · 2018-08-13T16:17:25.410

You may filter the topics based on the selected key first using Array#filter and then apply Array#reduce on the filtered array to generate the URL string:

let topics = [{"name":"beauty","selected":false},{"name":"career","selected":false},{"name":"childcare","selected":false},{"name":"crafts","selected":false},{"name":"culture","selected":false},{"name":"fashion","selected":true},{"name":"finances","selected":true},{"name":"fitness","selected":false},{"name":"food","selected":false},{"name":"health","selected":false},{"name":"home","selected":true},{"name":"personal","selected":false},{"name":"relationships","selected":false},{"name":"religion","selected":false}];

let result = '{{ base_url  }}/listings?num_items=1&start=3';
result = topics.filter(item => item.selected)
  .reduce((string, { name }) => `${string}&topics[]=${name}`, result);

console.log(result);

Jonas Wilms · Accepted Answer · 2018-08-13T16:19:16.193

2

You could map the topics to their name and add the topics[]= in front and join them by & and add that to the url:

   const topics = this.topics
      .filter(topic => topic.selected)
      .map(topic => "topics[]=" + topic.name)
      .join("&");
   const url = "/listings?num_items=1&start=3&" + topics;

edited Aug 13 '18 at 16:19

answered Aug 13 '18 at 16:09

Jonas Wilms

132,000
20
149
151

Nice readable solution. But it needs a filter on `selected` before mapping. – Kim Hogeling Aug 13 '18 at 16:12
@kim yeah then just `.filter()` before... – Jonas Wilms Aug 13 '18 at 16:15

Generate strings based on the array from backend - Javascript

2 Answers2