Как преобразовать массив объектов в сериализованный?

Question

У меня есть массив объектов

const parameters = [
  {token: '78fe6df3f'},
  {id: '12345'},
  { price: '0 - 9,000,000' },
  { 'area[]': 'Applehead Island' },
  { 'waterfront_type[]': 'Open Water' },
  { property_type_single: 'Single Family/Site Built' },
  { bedrooms: '0 - 5' },
  { baths: '0 - 5' },
  { sqft: '0 - 7500' }
];

Я хочу, чтобы этот объект был повернут, как показано ниже

https://www.example.com/properties.php?token=78fe6df3f&id=12345&price=$0%20-%20$3,480,000&area[]=Applehead%20Island&waterfront_type[]=Open%20Water&property_type_single=Single%20Family/Site%20Built&bedrooms=0%20-%205&baths=0%20-%205&sqft=0%20-%207500

Пожалуйста, помогите, как это получить?

Answer 1

Вы можете объединить все объекты в один, просмотреть его свойства и объединить в одну строку:

 const result = encodeURIComponent(Object.entries(Object.assign({}, ...parameters)).map(([key, value]) => key + "=" + value).join("&"));

Шаг за шагом:

  [{ k: v }, { k2, v2 }]

1) Object.assign({}, ...parameters)

 { k: v, k2: v2 }

2) Object.entries(...)

 [[k, v], [k2, v2]]

3) .map(([key, value]) => key + "=" + value)

 ["k=v", "k2=v2"]

4) .join("&")

 "k=v&k2=v2"

Answer 2

Моя цель в переполнении стека состоит в том, чтобы объяснить концепции очень упрощенным способом. Я прокомментировал код, чтобы вы понимали каждый шаг.

${} - это концепции ES6, если вы никогдавидел их, обратитесь к этой статье

Спасибо, что бросили мне вызов.

Так вот мой решенный код, короткий и простой.

var parameters = [
      {token: '78fe6df3f'},
      {id: '12345'},
      { price: '0 - 9,000,000' },
      { 'area[]': 'Applehead Island' },
      { 'waterfront_type[]': 'Open Water' },
      { property_type_single: 'Single Family/Site Built' },
      { bedrooms: '0 - 5' },
      { baths: '0 - 5' },
      { sqft: '0 - 7500' }
    ];


    //we initialize an empty variable
    var serializedString = '';

    //.map() This loop will loop through the array to pick each object
    parameters.map((i)=>{

      //for-in This loop goes through the key-value inside of each object
      for(var key in i){

        //here we are assigning the stringed values into the variable we declared earlier on
        serializedString +=`${key}=${i[key]}&`;
      }

    });


    //after all this is done , we convert our string into a URL friendly string
    var ourURL_friendlyResult = encodeURIComponent(serializedString);

    //we console it out
    console.log(`https://example.org/properties.php?${ourURL_friendlyResult}`);

Answer 3

Предполагая, что это JavaScript, вы можете использовать функцию encodeURIComponent() для URL-кодирования всех ваших пар ключ-значение, как вы показали.Просто переберите массив и объедините значения в кодировке URL:

const parameters = [
  { token: '78fe6df3f'},
  { id: '12345'},
  { price: '0 - 9,000,000' },
  { 'area[]': 'Applehead Island' },
  { 'waterfront_type[]': 'Open Water' },
  { property_type_single: 'Single Family/Site Built' },
  { bedrooms: '0 - 5' },
  { baths: '0 - 5' },
  { sqft: '0 - 7500' }
];

let uri = "https://example.org/properties.php?";
let firstSegment = true;

for(const param of parameters) {
  if(!firstSegment) {
    uri += "&";
    firstSegment = false;
  }
  
  // find out the name of this object's property
  const paramName = Object.keys(param)[0];
  uri += paramName + "=" + encodeURIComponent(param[paramName]);
}

console.log(uri);

Это можно записать более кратко, используя map() и join():

const parameters = [
  { token: '78fe6df3f'},
  { id: '12345'},
  { price: '0 - 9,000,000' },
  { 'area[]': 'Applehead Island' },
  { 'waterfront_type[]': 'Open Water' },
  { property_type_single: 'Single Family/Site Built' },
  { bedrooms: '0 - 5' },
  { baths: '0 - 5' },
  { sqft: '0 - 7500' }
];

let uri = "https://example.org/properties.php?" +
  parameters
    .map(
      param => {
        const name = Object.keys(param)[0];
        return name + "=" + encodeURIComponent(param[name]);
    })
    .join("&");
    
console.log(uri);