如何将所有值放入数组并使用javascript获取它们

时间:2019-02-22 02:52:59

标签: javascript arrays google-maps

此链接my question中有我的上一个问题

我要求将所有值放入数组并显示为HTML。他们反应很好,但是它只将一个值(zip1)显示到数组中并将其转换为HTML。

所以我想根据组号来获取zip1,zip2,距离,权重等所有值。

我尝试过,但是没有回答 我的代码与以前的答案有所不同。

const array = [[{"loc":{}},{"distance":6.4},{"zip1":"06120"},{"zip2":"06095"},{"group":1},{"weight":1119}],[{"loc":{}},{"distance":6.41},{"zip1":"06095"},{"zip2":"06120"},{"group":2},{"weight":41976}],[{"loc":{}},{"distance":6.41},{"zip1":"06095"},{"zip2":"06120"},{"group":1},{"weight":41976}]];

const merged = array.map((r, a) =>{
  const { group } = a.find(n => n.group)
  const { zip1 } = a.find(n => n.zip1)
  r[group] = r[group] || []
  r[group].push({Zip1:zip1})
   const { zip2 } = a.find(n => n.zip2)
    r[group].push({Zip2:zip2})
     const { weight } = a.find(n => n.weight)
    r[group].push({weight:weight})
     const { distance } = a.find(n => n.distance)
    r[group].push({distance:distance})
  return r;
},{})
const output = document.getElementById('output');

Object.entries(merged).forEach(([group, zips]) => {
  const h1 = document.createElement('h1');
  h1.innerHTML = "group " + group

  const span = document.createElement('span');
  span.innerHTML = `Zip1 - ${zips.zip1},${zips.zip2},${zips.weight},${zips.distance} (in group - ${group})`;

  output.appendChild(h1)
  output.appendChild(span)
})

我的预期输出(但我需要在google map infowindow中显示此内容。我仅显示示例内容) sample output

1 个答案:

答案 0 :(得分:0)

方法论

  1. 将2D数组转换为1D数组,因此将拥有对象而不是将 arrays 作为内部项目。这是通过arrToObj函数
  2. 完成的
  3. 将您的zip值从 string 转换为 array 。这样做是为了便于将来进行_concatenation。通过zipToArr函数完成
  4. 将对象的数组分组到一个 object 下。为此,我们升级 group键,并与同组的其他对象连接 zip1/zip2。请参阅grouper函数
  5. 使用上一个聚合上的Object.values
  6. 获取已分组的对象。我们已经有了group键,因此我们不再需要 parent
  7. 根据它们各自的将值格式化为HTML元素。由于我们将准备好元素,因此这将最终有助于生成HTML。完成了htmlformat函数
  8. 通过迭代先前生成的数组,
  9. 呈现HTML 。在每次迭代中,创建一个容器div ,该容器将容纳 group 。容器将帮助设置其第一个元素 group
  10. 的样式

实施

const array = [[{"loc":{}},{"distance":6.4},{"zip1":"06120"},{"zip2":"06095"},{"group":1},{"weight":1119}],[{"loc":{}},{"distance":6.41},{"zip1":"06095"},{"zip2":"06120"},{"group":2},{"weight":41976}],[{"loc":{}},{"distance":6.41},{"zip1":"06095"},{"zip2":"06120"},{"group":1},{"weight":41976}]];

// Data processing functions
const arrToObj = arr => arr.reduce((a, c) => ({ ...a, ...c}), {});
const zipToArr = x => ({...x, zip1: [x.zip1], zip2: [x.zip2]});
const grouper = (a, c) => {
  delete c.loc;
  delete c.distance;
  if (a[c.group]) {
    a[c.group].zip1.push(...c.zip1);
    a[c.group].zip2.push(...c.zip2);
    return a;
  } else {
    return {...a, [c.group]: c}
  }
};

// HTML utilities
const html = (k, v) => {
  const it = document.createElement('p');
  it.innerHTML = `${k} ${v}`;
  return it; 
}
const format = g => Object.keys(g).sort().reduce((a, c) => ({...a, [c]: html(c, g[c])}), {});

// Actual processing
const data = array.map(arrToObj).map(zipToArr).reduce(grouper, {});
const dataWithHTML = Object.values(data).map(format);

// Rendering
const display = document.getElementById('display');
dataWithHTML.forEach(it => {
  const container = document.createElement('div');
  Object.values(it).forEach(v => container.appendChild(v));
  display.appendChild(container);
});
p:first-of-type {
  font-size: 36px;
  font-weight: bold;
  margin: 0;
 }

p {
  text-transform: capitalize;
}
<div id="display"></div>