Получить вызов для данных JSON, а затем выполнить цикл, чтобы найти общие значения точки данных

Question

Цель состоит в том, чтобы сделать вызов и выполнить цикл по данным JSON и найти общее количество транспортных средств в обслуживании (истинное значение) и в нерабочем состоянии (ложное значение).

Пример JSON (Single Array):

  [{
    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 длянайти общее количество транспортных средств в обслуживании против выхода из эксплуатации.Моя цель - использовать эти данные для создания визуализации гистограммы.Я немного растерялся.

Answer 1

У вас есть два вопроса:

1. Основная логика подсчета определенного типа элемента в массиве
2. Работа с асинхронными данными и (возможно?) Рендеринг диаграммыбиблиотека в нокауте

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>

Answer 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

Скрипка