Получить данные Ajax из URL и использовать их

0

У меня есть следующее:

plot($('#pageviews'), 'line', {
  labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
  datasets: [
    { 
      fillColor: rgba("#404040", 0.25), 
      data: [20, 24, 28, 30, 26, 18, 16, 10] 
    }
  ]
});

И у меня есть url,/data/stats/pageviews, который возвращает JSON:

[{"Ярлыки": "1", "Данные": 2}, {"Ярлыки": "2", "Данные": 20}, {"Ярлыки": "4", "Данные": 20}]

Я попробовал следующее:

$.ajax({
  url: '/data/stats/pageviews',
  dataType: 'json'
}).success(function (data) {

  plot($('#pageviews'), 'line', {
    labels: data.Labels,
    datasets: [
      { 
        fillColor: rgba("#404040", 0.25), 
        data: data.Data
      }
    ]
  });

});

Это не работает... Я думаю, проблема в том, как я использую данные. Это?

Благодарю вас, Мигель

  • 0
    поместите ваш код в jsfiddle.
Теги:

2 ответа

2
Лучший ответ

Проблема в том, что использование data.Labels не data.Labels значения всех ключей Label в данных, потому что они хранят отдельные элементы в массиве. Поэтому нам придется циклически перебирать каждый элемент массива в ваших data, каждый из которых является объектом, доступ к которому мы можем получить при значении как Labels и Data. Демонстрация этого кода доступна на этой скрипте: http://jsfiddle.net/teddyrised/hHE2r/3/

var data = [ { "Labels": "1", "Data": 2 }, { "Labels": "2", "Data": 20 }, { "Labels": "4", "Data": 20 } ];

// Declare new arrays
var dataLabels = [],
    dataData = [];

// Loop through returned data
$.each(data, function(key, value){
    dataLabels.push(this.Labels);
    dataData.push(this.Data);
});

console.log(dataLabels);
console.log(dataData);

Поэтому, чтобы интегрировать это в ваш вызов AJAX, мы можем сделать следующее:

$.ajax({
    url: '/data/stats/pageviews',
    dataType: 'json'
}).success(function (data) {

    // Declare new arrays
    var dataLabels = [],
        dataData = [];

    // Loop through returned data
    $.each(data, function(key, value){
        dataLabels.push(this.Labels);
        dataData.push(this.Data);
    });    

    // Draw lot
    plot($('#pageviews'), 'line', {
        labels: dataLabels,
        datasets: [{
            fillColor: rgba("#404040", 0.25),
            data: dataData
        }]
    });

});
0

Вы можете вызвать запрос ajax, а затем установить параметры параметров на основе того, что запрос возвращает:

 $.ajax({
    url:"/data/stats/pageviews",
    dataType:'json'
    success:function(obj){
        plot($('#pageviews'), 'line', {
            labels: obj.Labels,
            datasets: [
             { 
                fillColor: rgba("#404040", 0.25), 
                data: obj.Data
             }
            ]
        });
    }
  });

Возвращаемый объект JSON должен быть в таком формате:

{"Labels": ["1", "2", "3", "4", "5", "6", "7", "8"],
 "Data": [20, 24, 28, 30, 26, 18, 16, 10]
} 
  • 0
    Я попробовал что-то подобное, но ничего не вышло ... Я просто обновил свой код ... Я думаю, проблема в том, как я использую данные JSON ... Так ли это?
  • 1
    Да, это. Теперь, когда вы отредактировали свой вопрос и опубликовали результат вашего JSON, мой ответ выше не сработает, вам придется либо проанализировать ваш ответ в javascript, как предлагает Terry, либо отформатировать ваш ответ в php, чтобы вернуть объект с предварительно отформатированными данными , Результат JSON: {"Data":[...],"Labels":[...]}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню