CODEWITHSUNDEEP
javascriptreactjsaxios
JustisBogus
JustisBogus

Reputation: 73

Axios params returns data inside an object instead of array

When using axios.get without the params all data is returned inside of array like it is supposed to be, but when I use params all objects are returned inside an object and I'cant map it. How can put all objects inside of array? If I try to put it inside of array it only puts the object that contains all the objects I need.

axios
  .get("http://api.digiart.lt/items/", { params: { category: "latte" } })
  .then((response) => {
    let coffee = response.data;
    this.props.onLoadData(coffee);
    console.log(response.data);
  });

returns like this

{…}
count: 10,
items: Object { 0: {…}, 2: {…}, 3: {…}, … },
<prototype>: Object { … }

supposed to be like this

Array(41) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

Upvotes: 0

Views: 2980

Answers (2)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

That's the default response from the http://api.digiart.lt/items/ API

Use Object.keys to map it to an array.

// Request -> http://api.digiart.lt/items?category=latte
var response = {
  "items": {
    "0": {
      "title": "Abbey's White Chocolate Latte",
      "description": "I created this recipe for my little sister, Abbey, who`s a latte fanatic. She was blown away, and drained it to the last drop! This makes one VERY large, indulgent latte, and could probably serve two. Enjoy!\n\nIngredients:\n1 1\/2 cups milk\n1 tablespoon heavy cream\n1\/8 teaspoon vanilla extract\n1 tablespoon white sugar\n1\/2 cup brewed espresso\n1\/4 cup white chocolate chips, chopped",
      "url": "https:\/\/www.allrecipes.com\/recipe\/137332\/abbeys-white-chocolate-latte\/",
      "category": "latte",
      "date": "2018-05-31",
      "img": "https:\/\/images.media-allrecipes.com\/userphotos\/560x315\/2107268.jpg"
    },
    "2": {
      "title": "Brown Sugar-Caramel Latte",
      "description": "Sometimes coffee is a dessert in itself. This is one of my favorite morning treats to make a Monday seem less intimidating. You'll need a battery-powered milk frother or it's just not the same.\n\nIngredients:\n1 tablespoon brown sugar\n1\/4 cup half-and-half\n1 tablespoon caramel ice cream topping\n3\/4 cup hot, brewed coffee",
      "url": "https:\/\/www.allrecipes.com\/recipe\/139119\/brown-sugar-caramel-latte\/",
      "category": "latte",
      "date": "2017-08-22",
      "img": "https:\/\/images.media-allrecipes.com\/userphotos\/560x315\/707064.jpg"
    }
    // .. More items
  }
}

var arr = []
Object.keys(response.items).forEach(key => arr.push(response.items[key]))
console.log(arr)

Upvotes: 1

andresmijares
andresmijares

Reputation: 3744

try this

axios.get('http://api.digiart.lt/items/',
        { params: 
            { category:"latte" }} )
    .then(response => {
        let coffee = Object.keys(response.items).map(i => response.items[i])

Upvotes: 0

Related Questions