时间戳

首页 > 解决方案 > 如何遍历数组以构建 url？

javascript - 如何遍历数组以构建 url？

问题描述

我正在尝试根据 url 获取数据。

一切正常，除了：let urlFilters。

我正在尝试做的事情：

到目前为止，迭代似乎起作用了。当我使用 console.log(urlFilters) 时，我会得到键值对，例如“filter=orange”或“filter=apple?”。问题：只有最后一个键值对被保存并因此用于url。

我的问题：如何保存迭代中的所有键值对并在 url 中使用它们？

const getInfo = async(filters, searchTerm) => {
  let url = "";
  let urlBasis = "/api/productInfo?";
  let urlSearchTerm = "";
  let urlFilters = "";

  if (searchTerm.length !== 0) {
    ...
  } else {
    ...
  };

  //problem 
  if (filters.length !== 0) {
    filters.forEach((filterItem, index) => {
      urlFilters = `filter=${filterItem.categoryUrl}${index === filters.length -1 ? "" : "&"}`
   //console.log(urlFilters) -> "filter=orange" or "filter=apple&"
    });
  } else {
    urlFilters = ""
  };

  try {
    //problem urlFilters: shows only the last key-value pair
    url = urlBasis + urlSearchTerm + `${searchTerm.length !== 0 && filters.length !== 0 ? "&" : ""}` + urlFilters


  } catch (err) {
    console.log(err);
  }
};

我已经尝试使用 .map 而不是 .forEach。我还尝试使用扩展运算符。但它没有用，我有点卡住了。任何建议（也用于代码改进）表示赞赏。非常感谢！

标签： javascriptloopsurl

解决方案

如果我正确理解了这个问题，您可以通过以下方式更轻松地迭代您的数组.map，然后使用以下命令将数组合并为单个字符串.join()：

const data = [{url: "apple"}, {url: "banana"}]
const url = `http://myurl.com?${data.map(item => `filter=${item.url}&`).join('').slice(0, -1)}`
console.log(url)

请注意，.slice()需要&从字符串中删除最后一个字符。

推荐阅读