Home > OS >  How to get data from a api using element of another api in reactjs
How to get data from a api using element of another api in reactjs

Time:08-26

Api1 = [{"user_id":1,"name":"Tim Keyson"},{"user_id":2,"name":"Augustus Kopfer"},{"user_id":3,"name":"Charyl Jopling"},{"user_id":4,"name":"Amos Rawll"},{"user_id":5,"name":"Maure Kopfen"},{"user_id":6,"name":"Alleen Colbourne"},{"user_id":7,"name":"Jada Nicholson"},{"user_id":8,"name":"Boycey Salzburg"},{"user_id":9,"name":"Nerta Jeschner"},{"user_id":10,"name":"Oran Spinozzi"},{"user_id":11,"name":"Alwin MacIntyre"},{"user_id":12,"name":"Alvan Wilkinson"},{"user_id":13,"name":"Querida Duckerin"},{"user_id":14,"name":"Gibb Fockes"},{"user_id":15,"name":"Rochell Doolan"},{"user_id":16,"name":"Artemas Cathrae"},{"user_id":17,"name":"Smith Gentery"},{"user_id":18,"name":"Esmaria Candlish"},{"user_id":19,"name":"Rice Kytter"},{"user_id":20,"name":"Brietta Haysham"}]
Api2 = [{"product_id":1,"name":"Cookie - Oatmeal","stock":92,"selling_price":141},{"product_id":2,"name":"Beer - Original Organic Lager","stock":88,"selling_price":27},{"product_id":3,"name":"Sobe - Orange Carrot","stock":85,"selling_price":176},{"product_id":4,"name":"Pepper - Chillies, Crushed","stock":99,"selling_price":70},{"product_id":5,"name":"Wine - Duboeuf Beaujolais","stock":21,"selling_price":157},{"product_id":6,"name":"Tomatoes Tear Drop","stock":3,"selling_price":58},{"product_id":7,"name":"Oneshot Automatic Soap System","stock":98,"selling_price":7},{"product_id":8,"name":"Wine - Magnotta, Merlot Sr Vqa","stock":91,"selling_price":181},{"product_id":9,"name":"Shrimp - Baby, Warm Water","stock":89,"selling_price":193},{"product_id":10,"name":"Oil - Margarine","stock":25,"selling_price":136},{"product_id":11,"name":"Cod - Salted, Boneless","stock":11,"selling_price":70},{"product_id":12,"name":"Coffee - Almond Amaretto","stock":33,"selling_price":184},{"product_id":13,"name":"Scallops - Live In Shell","stock":79,"selling_price":177},{"product_id":14,"name":"Mix - Cappucino Cocktail","stock":100,"selling_price":63},{"product_id":15,"name":"Veal - Ground","stock":88,"selling_price":46},{"product_id":16,"name":"Puree - Raspberry","stock":22,"selling_price":139},{"product_id":17,"name":"Bouillion - Fish","stock":46,"selling_price":146},{"product_id":18,"name":"Cookies - Fortune","stock":15,"selling_price":105},{"product_id":19,"name":"Tofu - Firm","stock":62,"selling_price":89},{"product_id":20,"name":"Guava","stock":94,"selling_price":65},{"product_id":21,"name":"Wine - Toasted Head","stock":56,"selling_price":38},{"product_id":22,"name":"Soup - Cream Of Potato / Leek","stock":49,"selling_price":135},{"product_id":23,"name":"Soup - Campbells","stock":73,"selling_price":19},{"product_id":24,"name":"Langers - Mango Nectar","stock":19,"selling_price":107},{"product_id":25,"name":"Goulash Seasoning","stock":18,"selling_price":193},{"product_id":26,"name":"Salmon - Sockeye Raw","stock":16,"selling_price":134},{"product_id":27,"name":"Dill - Primerba, Paste","stock":41,"selling_price":29},{"product_id":28,"name":"Crawfish","stock":90,"selling_price":14},{"product_id":29,"name":"Split Peas - Green, Dry","stock":89,"selling_price":51},{"product_id":30,"name":"Extract - Vanilla,artificial","stock":69,"selling_price":90},{"product_id":31,"name":"Chicken - Tenderloin","stock":11,"selling_price":24},{"product_id":32,"name":"Syrup - Kahlua Chocolate","stock":41,"selling_price":124},{"product_id":33,"name":"Gingerale - Diet - Schweppes","stock":1,"selling_price":183},{"product_id":34,"name":"Dc - Sakura Fu","stock":98,"selling_price":22},{"product_id":35,"name":"Creme De Cacao Mcguines","stock":42,"selling_price":85},{"product_id":36,"name":"Beer - Maudite","stock":16,"selling_price":62},{"product_id":37,"name":"The Pop Shoppe - Lime Rickey","stock":26,"selling_price":17},{"product_id":38,"name":"Rice - Sushi","stock":30,"selling_price":195},{"product_id":39,"name":"Saskatoon Berries - Frozen","stock":27,"selling_price":151},{"product_id":40,"name":"Cardamon Ground","stock":63,"selling_price":24},{"product_id":41,"name":"Pepper - Black, Crushed","stock":15,"selling_price":180},{"product_id":42,"name":"Sauce - Roasted Red Pepper","stock":25,"selling_price":84},{"product_id":43,"name":"Edible Flower - Mixed","stock":28,"selling_price":7},{"product_id":44,"name":"Cup - Translucent 7 Oz Clear","stock":92,"selling_price":56},{"product_id":45,"name":"Energy Drink - Redbull 355ml","stock":82,"selling_price":96},{"product_id":46,"name":"Coconut - Creamed, Pure","stock":95,"selling_price":43},{"product_id":47,"name":"Grenadillo","stock":42,"selling_price":109},{"product_id":48,"name":"Foam Cup 6 Oz","stock":28,"selling_price":68},{"product_id":49,"name":"Jicama","stock":7,"selling_price":21},{"product_id":50,"name":"Puff Pastry - Slab","stock":31,"selling_price":180}]
Api3 = [{"order_id":1,"product_id":25,"quantity":15,"user_id":20,"order_date":"1645767336"},{"order_id":2,"product_id":25,"quantity":11,"user_id":7,"order_date":"1646074072"},{"order_id":3,"product_id":28,"quantity":12,"user_id":20,"order_date":"1649596948"},{"order_id":4,"product_id":37,"quantity":2,"user_id":18,"order_date":"1629622903"},{"order_id":5,"product_id":15,"quantity":9,"user_id":6,"order_date":"1654642640"},{"order_id":6,"product_id":12,"quantity":4,"user_id":2,"order_date":"1637077313"},{"order_id":7,"product_id":5,"quantity":20,"user_id":16,"order_date":"1619069534"},{"order_id":8,"product_id":8,"quantity":9,"user_id":11,"order_date":"1649951404"},{"order_id":9,"product_id":9,"quantity":18,"user_id":13,"order_date":"1642497714"},{"order_id":10,"product_id":11,"quantity":19,"user_id":11,"order_date":"1637315114"},{"order_id":11,"product_id":9,"quantity":15,"user_id":10,"order_date":"1658620239"},{"order_id":12,"product_id":8,"quantity":6,"user_id":11,"order_date":"1630826177"},{"order_id":13,"product_id":19,"quantity":14,"user_id":2,"order_date":"1618036625"},{"order_id":14,"product_id":2,"quantity":3,"user_id":20,"order_date":"1637946344"},{"order_id":15,"product_id":45,"quantity":5,"user_id":3,"order_date":"1622076961"},{"order_id":16,"product_id":17,"quantity":16,"user_id":6,"order_date":"1649784097"},{"order_id":17,"product_id":17,"quantity":13,"user_id":20,"order_date":"1642666779"},{"order_id":18,"product_id":48,"quantity":16,"user_id":8,"order_date":"1647850514"},{"order_id":19,"product_id":41,"quantity":14,"user_id":17,"order_date":"1656260002"},]

How to get the product name from api2 using the product_id from api 3.

CodePudding user response:

You can map the Api3 array to add names to each data

const Api3WithName = Api3.map(item => ({...item, name: Api2.find(({product_id}) => product_id === item.product_id)?.name || ""}))

All code

    componentDidMount() { 
  axios.get("https://assessment.api.vweb.app/orders")
  .then(res => { const Api2 = res.data; this.setState({ Api2}); })
  axios.get("https://assessment.api.vweb.app/users")
  .then(res => { const Api1 = res.data; this.setState({ Api1 }); }) 
  axios.get("https://assessment.api.vweb.app/products")
  .then(res => { const Api3 = res.data.map(item => ({...item, product_name: this.state.Api2.find(({product_id}) => product_id === item.product_id)?.name || "", user_name: this.state.Api1.find(({user_id}) => user_id === item.user_id)?.name || ""})); this.setState({ Api3 }); })
}
  • Related