javascript - 如何循环并将对象值推送到数组？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 3 年前。

Improve this question

我有一个像这样的json:

data: (46) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Province/State: "Anhui"
Country/Region: "Mainland China"
Lat: 31.8257
Long: 117.2264

现在data有

data: Array(46)
0: {date: "1/22/20", Recovered: 0, Deaths: 0, Confirmed: 1}
1: {date: "1/23/20", Recovered: 0, Deaths: 0, Confirmed: 9}
2: {date: "1/24/20", Recovered: 0, Deaths: 0, Confirmed: 15}
3: {date: "1/25/20", Recovered: 0, Deaths: 0, Confirmed: 39}
4: {date: "1/26/20", Recovered: 0, Deaths: 0, Confirmed: 60}
5: {date: "1/27/20", Recovered: 0, Deaths: 0, Confirmed: 70}
6: {date: "1/28/20", Recovered: 0, Deaths: 0, Confirmed: 106}

我在 json 中有很多对象，我循环并推送坐标，如下所示:

let coords = [];

getVirusData();

function getVirusData() {
  getAvailableDatasets()
    .then(combineDatasets)
    .then(data => { // It's asynchronous
      coords.push.apply(coords, data.map(item => item.Lat + "," + item.Long));
    }).then(function(entry) {
      for (var a = 0; a < coords.length; a++) {
        var pin = coords[a].split(',');
        var latLng = new google.maps.LatLng(pin[0], pin[1]);
        var marker = new google.maps.Marker({
          position: latLng,
          map: map
        });
      }
    });
  }

这可行，但我还需要将每个对象的每个日期插入一个数组，我应该相信是一个关联数组，因为日期与这些特定坐标相关，并且对每个对象都这样做，并且“已确认”，“Recovered”和“Deaths”应该进入它们自己的数组，但与每个对象相关

所需的输出将是一个类似的数组

obj = ["31.8257,117.2264"]["22/02/20", "24/02720"]["已恢复 1", "已恢复 3"]

但我不明白如何为每个对象做到这一点

Answer 1

这是一个工作 fiddle ，用于根据 slider 中的日期和输入数据上的 date 属性过滤输入:

https://jsfiddle.net/ku16vapg/5

let virusData;
let virusDataCopy;
getVirusData();

function getVirusData() {
  getAvailableDatasets()
    .then(combineDatasets)
    .then((r) => {
      try {
        virusData = JSON.Parse(r);
      } catch (e) {
        virusData = r;
      }
      initUI(virusData);
    })
}



function initUI(initialDataSet) {
  function dateToTS(date) {
    return date.valueOf();
  }

  function tsToDate(ts) {
    var d = new Date(ts);
    return d.toLocaleDateString(lang, {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  }

  let dataSetCopy = [];
  initialDataSet.forEach(ds => {
    ds.data.forEach(obj => {
      dataSetCopy.push(obj.date)
    })
  })
  dataSetCopy.sort((a, b) => Date.parse(a) - Date.parse(b));
  console.log(dataSetCopy)

  let lang = "en-US";

  $("#demo_4").ionRangeSlider({
    skin: "big",
    type: "double",
    grid: true,
    min: dateToTS(new Date(dataSetCopy[0])),
    max: dateToTS(new Date(dataSetCopy[dataSetCopy.length - 1])),
    from: dateToTS(new Date(dataSetCopy[3000])),
    to: dateToTS(new Date(dataSetCopy[7000])),
    prettify: tsToDate,
    onFinish: function(data) {
      let filtererdData = virusData.map(vd => {
        return { ...vd,
          data: vd.data.filter(obj => {
            objDataTS = Date.parse(obj.date);
            return (objDataTS < data.to) && (objDataTS > data.from)
          })
        }
      })
      updateUI(filtererdData)
    },
  });
  updateUI(initialDataSet)
}

function updateUI(dataSet) {
  document.querySelector("pre").textContent = JSON.stringify(dataSet, null, 2)
};



function getAvailableDatasets() {
  return $.getJSON('https://api.github.com/repos/CSSEGISandData/COVID-19/contents/csse_covid_19_data/csse_covid_19_time_series')
    .then((files) => {
      return Promise.all(
        files.filter(file => /^time_series_19-covid-.+\.csv$/.test(file.name))
        .map(file => getDataset(file.download_url))
      );
    })
    .catch(function(err) {
      console.log(err);
    })
}

function getDataset(url) {
  return $.ajax(url)
    .then(csv => {
      const output = Papa.parse(csv, {
        header: true, // Convert rows to Objects using headers as properties
        dynamicTyping: true, // Convert some fields to Numbers automatically
      });
      if (output.data) {
        const labelMatches = url.match(/time_series_19-covid-(.+)\.csv$/);
        const label = labelMatches ? labelMatches[1] : "Untitled";

        const formatted = output.data.map(area => {
          const obj = {};

          Object.keys(area).forEach(key => {
            if (/^\d+\/\d+\/\d+$/.test(key)) {
              obj[key] = {
                date: key,
                [label]: area[key]
              };
            } else {
              obj[key] = area[key];
            }
          });

          return obj;
        });



        return formatted;
      } else {
        console.log(output.errors);
      }
    });
}

function combineDatasets(datasets) {
  if (datasets.length) {
    const combined = datasets.reduce((result, dataset, i) => {
      if (i === 0) {
        return result;
      }
      dataset.forEach(area => {
        // Look for area with same coordinates
        let existingArea = result.find(a => a.Lat === area.Lat && a.Long === area.Long);
        if (!existingArea) {
          result.push(area);
        } else {
          const dates = Object.keys(area).filter(key => /^\d+\/\d+\/\d+$/.test(key));
          dates.forEach(date => existingArea[date] = Object.assign(area[date], existingArea[date]));
        }
      });
      return result;
    }, datasets[0]);

    return combined.map(area => {
      const obj = {
        data: []
      };

      Object.keys(area).forEach(key => {
        if (/^\d+\/\d+\/\d+$/.test(key)) {
          obj.data.push(area[key]);
        } else {
          obj[key] = area[key];
        }
      });

      return obj;
    });
  } else {
    throw "No datasets were found";
  }
}

<!--Plugin CSS file with desired skin-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<input id="demo_4" />
<pre></pre>