Parse JSON response from API in Angular

Question

I'm new to Angular and having trouble trying to parse a JSON response from this API: http://icd10api.com/?s=C50&desc=long&r=json

in this codepen here: http://codepen.io/FritzAPI/pen/dNZWKZ

which I got working with a hardcoded modified response:

function loadVegetables() {
    var veggies = [
        {"Name":"C50","Description":"Malignant neoplasm of breast"},{"Name":"C50.0","Description":"Malignant neoplasm of nipple and areola"},{"Name":"C50.01","Description":"Malignant neoplasm of nipple and areola, female"},{"Name":"C50.011","Description":"Malignant neoplasm of nipple and areola, right female breast"},{"Name":"C50.012","Description":"Malignant neoplasm of nipple and areola, left female breast"},{"Name":"C50.019","Description":"Malignant neoplasm of nipple and areola, unspecified female breast"},{"Name":"C50.02","Description":"Malignant neoplasm of nipple and areola, male"},{"Name":"C50.021","Description":"Malignant neoplasm of nipple and areola, right male breast"},{"Name":"C50.022","Description":"Malignant neoplasm of nipple and areola, left male breast"},{"Name":"C50.029","Description":"Malignant neoplasm of nipple and areola, unspecified male breast"}
    ];

    return veggies.map(function (veg) {
        veg._lowername = veg.Name.toLowerCase();
        veg._lowertype = veg.Description.toLowerCase();
        return veg;
    });
}

but as soon as the response is wrapped in a search array {"Search":[...]} this function no longer works.

Please provide all relevant code in an minimal reproducible example in the question itself, not only on a third-party site. — Heretic Monkey
– Heretic Monkey, Commented May 9, 2017 at 17:38

ktilcu · Accepted Answer · 2017-05-09 17:40:20Z

1

It seems like your hardcoded object is just slightly different than the response from the API. The API returns an object with a Key Search. The value of Search is what your veggies array is imitating. So something like:

apiResponse.Search.map(function (veg) {
  veg._lowername = veg.Name.toLowerCase();
  veg._lowertype = veg.Description.toLowerCase();
  return veg;
});

answered May 9, 2017 at 17:40

ktilcu

3,1381 gold badge20 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bfritz Over a year ago

This is returning a "TypeError: Cannot read property 'map' of undefined... codepen.io/FritzAPI/pen/LyQYOb

bfritz Over a year ago

Took a stab in the dark and this seems to be working: return veggies[0].Search.map

ktilcu Over a year ago

Interesting. The response from the API is just an object. Somehow you have an array of objects. How are you building up the veggies variable?

bfritz Over a year ago

The end goal is to actually get the response from the API and not work with this hardcoded variable.

bfritz Over a year ago

I was trying to understand the parsing before attempting that part, that's why I was working with this hardcoded variable that matches the API response.

Rohìt Jíndal · Accepted Answer · 2017-05-10 08:41:04Z

0

DEMO

var jsonObj = {"Search":[{"Name":"C50","Description":"Malignant neoplasm of breast"},{"Name":"C50.0","Description":"Malignant neoplasm of nipple and areola"},{"Name":"C50.01","Description":"Malignant neoplasm of nipple and areola, female"},{"Name":"C50.011","Description":"Malignant neoplasm of nipple and areola, right female breast"},{"Name":"C50.012","Description":"Malignant neoplasm of nipple and areola, left female breast"},{"Name":"C50.019","Description":"Malignant neoplasm of nipple and areola, unspecified female breast"},{"Name":"C50.02","Description":"Malignant neoplasm of nipple and areola, male"},{"Name":"C50.021","Description":"Malignant neoplasm of nipple and areola, right male breast"},{"Name":"C50.022","Description":"Malignant neoplasm of nipple and areola, left male breast"},{"Name":"C50.029","Description":"Malignant neoplasm of nipple and areola, unspecified male breast"}],"totalResults":"82","Response":"True"};

var res = jsonObj.Search.map(item => { 
  item._lowername = item.Name.toLowerCase();
  item._lowertype = item.Description.toLowerCase();
  return item;
});

console.log(res);

answered May 10, 2017 at 8:41

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

2 Comments

bfritz Over a year ago

I still had to add the specific array index "veggies[0]" to get this to work: codepen.io/FritzAPI/pen/LyQYOb

Rohìt Jíndal Over a year ago

Yes because the json provided in plnkr is an array of objects [{..}] but here in OP it is only object {}.

Collectives™ on Stack Overflow

Parse JSON response from API in Angular

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related