Получить конкретные значения вложенного объекта в массиве

Question

Я делаю запрос AJAX, и я получаю это (смотрите на вкладке Network)

[ 
    { 
     "request": "Amount of rainfall by day", 
     "days": [ 
      { 
       "day": 1, 
       "amount": 50 
      }, { 
       "day": 2, 
       "amount": 10 
      }, { 
       "day": 3, 
       "amount": 10 
      }, { 
       "day": 4, 
       "amount": 150 
      }, { 
       "day": 5, 
       "amount": 130 
      }, { 
       "day": 6, 
       "amount": 45 
      }, { 
       "day": 7, 
       "amount": 10 
      } 
     ] 
    } 
] 

Я хотел бы создать массив со значениями «количества».

[50,10,10,150,130,45,10] 

(порядок важен, я покажу эти значения в диаграмме с хронологическим порядком)

я пытался lodash.values, а также for..in но сочетание между вложенными массивами и вложенными объектами является довольно запутанным ,

Я хотел бы элегантное решение.

Вопрос 1: Должен ли я использовать метод Json для удаления внешнего корневого уровня? Любой способ избавиться от него?

Вопрос 2: Какую структуру данных следует использовать для поддержания связи между днями и суммами? (Мое картирование библиотека, Chart.js получает простой массив отдельных значений

Answer 1

Используйте Array#map, чтобы создать новый массив из запрашиваемых значений:

var data = [{"request":"Amount of rainfall by day","days":[{"day":1,"amount":50},{"day":2,"amount":10},{"day":3,"amount":10},{"day":4,"amount":150},{"day":5,"amount":130},{"day":6,"amount":45},{"day":7,"amount":10}]}]; 
 

 
var result = data[0].days.map(function(obj) { 
 
    return obj.amount; 
 
}); 
 

 
console.log(result);

---

Вопрос 1

Вы можете tranverse его легко с помощью data[0], и после того, как вы будете карту/уменьшить, вы получите новую структуру данных.

---

Вопрос 2

Вы можете использовать простой объект, с двумя связанными массивами с помощью Array#reduce:

var data = [{"request":"Amount of rainfall by day","days":[{"day":1,"amount":50},{"day":2,"amount":10},{"day":3,"amount":10},{"day":4,"amount":150},{"day":5,"amount":130},{"day":6,"amount":45},{"day":7,"amount":10}]}]; 
 

 
var result = data[0].days.reduce(function(r, o) { 
 
    r.days.push(o.day); 
 
    r.amounts.push(o.amount); 
 
    
 
    return r; 
 
}, { days: [], amounts: [] }); 
 

 
console.log(JSON.stringify(result));

Answer 2

Используйте это:.

var reply = [ 
 
    { 
 
     "request": "Amount of rainfall by day", 
 
     "days": [ 
 
      { 
 
       "day": 1, 
 
       "amount": 50 
 
      }, { 
 
       "day": 2, 
 
       "amount": 10 
 
      }, { 
 
       "day": 3, 
 
       "amount": 10 
 
      }, { 
 
       "day": 4, 
 
       "amount": 150 
 
      }, { 
 
       "day": 5, 
 
       "amount": 130 
 
      }, { 
 
       "day": 6, 
 
       "amount": 45 
 
      }, { 
 
       "day": 7, 
 
       "amount": 10 
 
      } 
 
     ] 
 
    } 
 
]; 
 

 
var amounts = reply[0].days.map((i) => { return i.amount }); 
 
console.log(amounts);

Answer 3

В случае day значение свойства делает не следует порядку элементов в re объект-ответ, вам может понадобиться использовать это значение как индекс в вашем конечном массиве. Вот решение ES6:

var response = [ 
 
    { 
 
     "request": "Amount of rainfall by day", 
 
     "days": [ 
 
      { 
 
       "day": 1, 
 
       "amount": 50 
 
      }, { 
 
       "day": 2, 
 
       "amount": 10 
 
      }, { 
 
       "day": 3, 
 
       "amount": 10 
 
      }, { 
 
       "day": 4, 
 
       "amount": 150 
 
      }, { 
 
       "day": 5, 
 
       "amount": 130 
 
      }, { 
 
       "day": 6, 
 
       "amount": 45 
 
      }, { 
 
       "day": 7, 
 
       "amount": 10 
 
      } 
 
     ] 
 
    } 
 
]; 
 

 
var arr = response[0].days.reduce((arr, o) => (arr[o.day-1] = o.amount, arr), []); 
 

 
console.log(arr);

Так что это будет работать даже если значение 4-й день не было. Значение в соответствующем индексе в выходном массиве (индекс 3) в этом случае будет undefined.

Answer 4

Я использую Lodash, чтобы ответить на ваш вопрос

var response = [ 
    { 
     "request": "Amount of rainfall by day", 
     "days": [ 
      { 
       "day": 1, 
       "amount": 50 
      }, { 
       "day": 2, 
       "amount": 10 
      }, { 
       "day": 3, 
       "amount": 10 
      }, { 
       "day": 4, 
       "amount": 150 
      }, { 
       "day": 5, 
       "amount": 130 
      }, { 
       "day": 6, 
       "amount": 45 
      }, { 
       "day": 7, 
       "amount": 10 
      } 
     ] 
    } 
]; 
// using _.map function 
_.map(response[0].days, 'amount'); 

Lodash