获取 JSON 数据的调用，然后循环查找数据点的总值

Posted 2023-03-27

【中文标题】获取 JSON 数据的调用，然后循环查找数据点的总值

【英文标题】：Get Call for JSON data, then looping through to find total values of a data point

【发布时间】：2019-03-13 14:25:11

【问题描述】：

目标是进行 get 调用并遍历 JSON 数据，并找出服务中（真值）和停止服务（假值）的车辆总数。

JSON 示例（单个数组）：

  [
    TxId : "",
    Value : 
      Vin : "",
      Owner : "",
      VehicleType : "",
      LastLocation : "",
      InService : false
    ,
    Timestamp : "",
    IsDelete : ""
  , 
    TxId : "",
    Value : 
      Vin : "",
      Owner : "",
      VehicleType : "",
      LastLocation : "",
      InService : false
    ,
    Timestamp : "",
    IsDelete : ""
  , 
    TxId : "",
    Value : 
      Vin : "",
      Owner : "",
      VehicleType : "",
      LastLocation : "",
      InService : false
    ,
    Timestamp : "",
    IsDelete : ""
  ]

我已经启动了我的js文件代码：

function barChartModel(context) 
         const self = this;

         /* chart data */
         let barSeries = [name: "In-service", items: [0],
                          name: "Out-of-service", items: [0]];

        $.get("http://localhost:9000/vehicles", (data) => 

我将如何遍历此 JSON 数据以查找服务车辆总数与停止服务车辆总数。我的目标是使用这些数据来创建条形图可视化。我现在有点迷茫。

【参考方案1】：

你的问题有两点：

对数组中特定类型项进行计数的基本逻辑 使用异步数据和（可能？）淘汰赛中的图表呈现库

1。获取条形值

另一个答案已经显示了使用filter 的方法。我想建议使用reduce 的替代方法：

const data = ["TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":false,"Timestamp":"","IsDelete":"","TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":false,"Timestamp":"","IsDelete":"","TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":true,"Timestamp":"","IsDelete":""];

const inService = data.reduce(
  (sum, x) => sum + (x.Value.InService ? 1 : 0),
  0
);

console.log(inService);

2。处理异步数据

您可以使用可观察数组来写入数据响应。然后，您可以在发生任何变化时自动重新计算服务中的总和，并将其合并到您的图表数据中。

通过订阅计算出的图表数据，您可以触发某种外部更新来重新渲染图表（取决于您使用的库）

const isInService = ( Value:  InService ) => InService;
const count = (pred, xs) => 
  xs.reduce((sum, x) => sum + pred(x), 0);

// App
// When the async call completes, it writes to this array
const data = ko.observableArray([]);

// Whenever the data changes, this outputs a new configuration
// object
const graphData = ko.computed(() => 
  const inService = count(isInService, data());
  return [
     name: "In-service", items: [inService],
     name: "Out-of-service", items: [data().length - inService]
  ];
);

// The first render renders an empty graph, the data hasn't
// yet loaded
renderGraph(graphData());

// Ensure future updates
graphData.subscribe(renderGraph);

// Load initial data
fakeFetch("/someUrl").then(data);


// Utils
function fakeFetch() 
  return new Promise((res, rej) => 
    setTimeout(
      res.bind(null, getData()), 
      1000
    )
  )


function renderGraph(graphData) 
  console.log(
    graphData.map(bar => 
      bar.name.padEnd(16, " ") + "|" +
      Array(bar.items[0]).fill("⬛").join("")
    ).join("\n")
  );


function getData()  return ["TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":false,"Timestamp":"","IsDelete":"","TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":false,"Timestamp":"","IsDelete":"","TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":true,"Timestamp":"","IsDelete":""]; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

【参考方案2】：

var data = ["TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":false,"Timestamp":"","IsDelete":"","TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":false,"Timestamp":"","IsDelete":"","TxId":"","Value":"Vin":"","Owner":"","VehicleType":"","LastLocation":"","InService":false,"Timestamp":"","IsDelete":""];


var inServiceCount = ko.utils.arrayFilter(data, function(item)
    return item.Value.InService;
).length;

var outOfServiceCount = data.length - inServiceCount; // Assuming InService is boolean and can not be null

console.log(inServiceCount); //0
console.log(outOfServiceCount); //3

Fiddle

【讨论】：

item.InService 应该是item.Value.InService