We Keep Coding

Can console log fetched array but cant get the values

So I can call the variable "teams" and see the data fine but I can't get the values from it in my {#each} block. I know its not part of the "fixtures" variable I'm iterating through and tbh that's probably the issue.
Does anyone know how I can get the actual values within "teams" instead of getting 'undefined' or a better way of fetching multiple arrays within themselves? (ill put the example at the bottom)
my +page.svelte
<script>
export let data;
const { fixtures } = data;
const teams = fixtures.flatMap(fixtures => fixtures.participants)
console.log(teams)
</script>
<div class="flex flex-col absolute top-[0] right-0 w-[85vw] p-6">
<div class="">
{#each fixtures as fixture}
<p>{fixture.name}</p>
<div class="">{fixture.home_score}{fixture.away_score}</div>
<p>{teams.short_code}</p>
{/each}
</div>
</div>
+page.server.js
export const load = async () => {
const fetchList= async () => {
const url = `https://api.sportmonks.com/v3/football/schedules/seasons/19734?api_token=${process.env.API_KEY}`;
const res = await fetch(url);
const data = await res.json()
return data.data.flatMap(data => data.rounds.map(rounds => rounds.fixtures)).flat()
}
return {
fixtures: fetchList(),
}
}
The API
{
"data": [
{
"id": 77457864,
"sport_id": 1,
"league_id": 8,
"season_id": 19734,
"type_id": 223,
"name": "Regular Season",
"sort_order": 1,
"finished": false,
"is_current": true,
"starting_at": "2022-08-05",
"ending_at": "2023-05-28",
"rounds": [
{
"id": 274668,
"sport_id": 1,
"league_id": 8,
"season_id": 19734,
"stage_id": 77457864,
"name": "1",
"finished": true,
"is_current": false,
"starting_at": "2022-08-05",
"ending_at": "2022-08-07",
"fixtures": [
{
"id": 18535049,
"sport_id": 1,
"league_id": 8,
"season_id": 19734,
"stage_id": 77457864,
"group_id": null,
"aggregate_id": null,
"round_id": 274668,
"state_id": 5,
"venue_id": 206,
"name": "Manchester United vs Brighton & Hove Albion",
"home_score": 1,
"away_score": 2,
"starting_at": "2022-08-07 13:00:00",
"result_info": "Brighton & Hove Albion won after full-time.",
"leg": "1/1",
"details": null,
"length": 90,
"placeholder": false,
"last_processed_at": "2022-12-05 09:15:37",
"starting_at_timestamp": 1659877200,
"participants": [
{
"id": 14,
"sport_id": 1,
"country_id": 462,
"venue_id": 206,
"gender": "male",
"name": "Manchester United",
"short_code": "MUN",
"image_path": "https://cdn.sportmonks.com/images/soccer/teams/14/14.png",
"founded": 1878,
"type": "domestic",
"placeholder": false,
"last_played_at": "2022-12-10 17:00:00",
"meta": {
"location": "home"
}
},
{
"id": 78,
"sport_id": 1,
"country_id": 462,
"venue_id": 480,
"gender": "male",
"name": "Brighton & Hove Albion",
"short_code": "BRH",
"image_path": "https://cdn.sportmonks.com/images/soccer/teams/14/78.png",
"founded": 1901,
"type": "domestic",
"placeholder": false,
"last_played_at": "2022-12-08 13:00:00",
"meta": {
"location": "away"
}
}
]
},

There's a "dirty" way to do it with {#key}

Show Result routing path with Leaflet

I get route between 2 Point :
{
"routes": [
{
"overview_polyline": {
"points": "m{f~D}_ygHp#wAJs#Is#eAsBGk#Hg#"
},
"legs": [
{
"summary": "میدان انقلاب - انقلاب",
"distance": {
"value": 209.0,
"text": "۲۲۵ متر"
},
"duration": {
"value": 13.0,
"text": "کمتر از ۱ دقیقه"
},
"steps": [
{
"name": "بزرگراه اهواز-حمیدیه",
"instruction": "در جهت شرق در بزرگراه اهواز-حمیدیه قرار بگیرید",
"bearing_after": 119,
"type": "depart",
"distance": {
"value": 25.0,
"text": "۲۵ متر"
},
"duration": {
"value": 1.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "m{f~D}_ygHTm#",
"start_location": [
48.629912,
31.333827
]
},
{
"name": "انقلاب",
"instruction": "در میدان انقلاب، از خروجی دوم، خارج شوید",
"rotaryName": "میدان انقلاب",
"bearing_after": 126,
"type": "rotary",
"modifier": "straight",
"exit": 2,
"distance": {
"value": 101.0,
"text": "۱۲۵ متر"
},
"duration": {
"value": 5.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "wzf~DkaygHNWJQJs#Is#Yk#",
"start_location": [
48.630143,
31.333717
]
},
{
"name": "",
"instruction": "به مسیر خود ادامه دهید",
"bearing_after": 53,
"type": "exit rotary",
"modifier": "straight",
"exit": 2,
"distance": {
"value": 83.0,
"text": "۱۰۰ متر"
},
"duration": {
"value": 8.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "szf~DigygHk#gAGk#Hg#",
"start_location": [
48.631088,
31.333703
]
},
{
"name": "انقلاب",
"instruction": "در مقصد قرار دارید",
"bearing_after": 0,
"type": "arrive",
"distance": {
"value": 0.0,
"text": ""
},
"duration": {
"value": 0.0,
"text": ""
},
"polyline": "}{f~DelygH",
"start_location": [
48.631869,
31.333913
]
}
]
}
]
}
]
}
In Steps we have 4 points:
[31.333827,48.629912 ],
[31.333717,48.630143 ],
[31.333703,48.631088],
[31.333913,48.631869 ]
When I use polyline my output is like below picture. But real Path is another thing.
I use Leaflet and get my .png file for map from another server and get Json String from another server.
How can Manage this?

A Map Matching API should solve your problem.
Google Snap to Roads API
Mapbox Map Matching API
There also seems to be some open source alternatives like the Valhalla Map Matching API

What was the original directions API request? Curious to see why you're getting that result for that route

Changing the value of a field of an object in couchdb map function

In the map function of my view I am trying to change a field of a javascript object. Interestingly i can not change a field and than emit that object.
I expect all the name fields if the irem object would be "test". But i can`t change it. Any help would be great..
Map Function
function(doc) {
doc.movieList.forEach(function(item){
item.name = "test";
emit([doc.companyId,item.movieID],item);
});
}
Result
"rows": [
{
"key": [
"147",
"044a30f24e98660a8a8c12d09b1cafb3"
],
"value": {
"categoryID": 4,
"dataModelVersion": 1,
"forSale": false,
"movieID": "044a30f24e98660a8a8c12d09b1cafb3",
"name": "HULK", //This field shoud be "test"
"orderId": 99,
"term": 0,
"visible": true,
"watchCount": 0
}
},
{
"key": [
"147",
"07c3c1bc4ac5d99286ccc54cde06b86a"
],
"value": {
"categoryID": 2,
"dataModelVersion": 1,
"forSale": false,
"movieID": "07c3c1bc4ac5d99286ccc54cde06b86a",
"name": "KACIS-PLANI", //This field shoud be "test"
"orderId": 99,
"term": 0,
"visible": true,
"watchCount": 0
}
},
{
"key": [
"147",
"0c6f28034e39bc94009be0375e2fba2a"
],
"value": {
"categoryID": 8,
"dataModelVersion": 1,
"forSale": false,
"movieID": "0c6f28034e39bc94009be0375e2fba2a",
"name": "YOLA-GELDIK", //This field shoud be "test"
"orderId": 99,
"term": 0,
"visible": true,
"watchCount": 0
}
},

Checking into CouchDB code, the doc provided to the map function is sealed so no modification is allowed over the original object.
You need to copy the original object into a new one in order to modify its attributes.

Convert a Invalid JSON Object to Valid JSON Object in JavaScript

I know this is already asked question but i don't get answer from any question previously asked...
My Problem is - Server sends a Array of JSON objects as String and i want to convert the string in to valid JSON array.
Example: Server sends like this
'{
"ts": "3170075",
"eventid": 25,
"oper_minutes": 48577,
"time": "2016-12-02T06:36:36Z",
"lto": "7200000",
"package_name": "XXX",
"timestamp": "1480660593188",
"action_type": "1",
"events": [{
"device_name": 0,
"key_category": 1,
"eventid": 15,
"ts": "2111"
}, {
"power_state": 3,
"reason": 1,
"eventid": 1,
"ts": "2113"
}]
}, {
"ts": "3170084",
"eventid": 25,
"oper_minutes": 48577,
"time": "2016-12-02T06:36:36Z",
"lto": "7200000",
"package_name": "XXXX",
"timestamp": "1480660593218",
"action_type": "1",
"events": [{
"device_name": 0,
"key_category": 1,
"eventid": 15,
"ts": "2111"
}, {
"power_state": 3,
"reason": 1,
"eventid": 1,
"ts": "2113"
}]
}'
I want to convert it into valid array of two objects using pure javascript.
Example:
[{
"ts": "3170075",
"eventid": 25,
"oper_minutes": 48577,
"time": "2016-12-02T06:36:36Z",
"lto": "7200000",
"package_name": "XXX",
"timestamp": "1480660593188",
"action_type": "1",
"events": [{
"device_name": 0,
"key_category": 1,
"eventid": 15,
"ts": "2111"
}, {
"power_state": 3,
"reason": 1,
"eventid": 1,
"ts": "2113"
}]
}, {
"ts": "3170084",
"eventid": 25,
"oper_minutes": 48577,
"time": "2016-12-02T06:36:36Z",
"lto": "7200000",
"package_name": "XXX",
"timestamp": "1480660593218",
"action_type": "1",
"events": [{
"device_name": 0,
"key_category": 1,
"eventid": 15,
"ts": "2111"
}, {
"power_state": 3,
"reason": 1,
"eventid": 1,
"ts": "2113"
}]
}]
I already tried JSON.parse, JSON.stringify, etc
No valid result as expected..
NOTE: This array of objects may be of any size, the server sometimes send 1000 objects and sometimes only 10 but as string. Should not take too much time to process.
Please help, i'm stuck with this for almost a day.. i'm using this in nodeJS so Only pure javaScript or with NPM libraries.

The JSON string you're sending is invalid because it should be encapsulated in [].
You could do :
var str = '{"ts": "3170075","eventid": 25,"oper_minutes": 48577,"time": "2016-12-02T06:36:36Z","lto": "7200000","package_name": "XXX","timestamp": "1480660593188","action_type": "1","events": [{"device_name": 0,"key_category": 1,"eventid": 15,"ts": "2111" }, {"power_state": 3,"reason": 1,"eventid": 1,"ts": "2113" }]}, {"ts": "3170084","eventid": 25,"oper_minutes": 48577,"time": "2016-12-02T06:36:36Z","lto": "7200000","package_name": "XXXX","timestamp": "1480660593218","action_type": "1","events": [{"device_name": 0,"key_category": 1,"eventid": 15,"ts": "2111" }, {"power_state": 3,"reason": 1,"eventid": 1,"ts": "2113"}]}';
var obj = JSON.parse(`[${str}]`);
The errors you get trying to do it manually are because your original String is invalid as posted in your post (because of the newlines).

json twitter query, parse to html feed

i am trying to build a hastag feed for twitter,
i already have read how to create the search query, and i have this json structure...
{
"completed_in": 0.026,
"max_id": 201961894368653313,
"max_id_str": "201961894368653313",
"next_page": "?page=2&max_id=201961894368653313&q=wearetwo&lang=en&rpp=100&include_entities=1",
"page": 1,
"query": "wearetwo",
"refresh_url": "?since_id=201961894368653313&q=wearetwo&lang=en&include_entities=1",
"results": [
{
{
"created_at": "Sat, 12 May 2012 01:06:19 +0000",
"entities": {
"hashtags": [
{
"text": "wearetwo",
"indices": [
12,
21
]
}
],
"urls": [
],
"user_mentions": [
{
"screen_name": "crifor",
"name": "Cristina Forlani",
"id": 110646291,
"id_str": "110646291",
"indices": [
3,
10
]
}
],
"media": [
{
"id": 201101250740240387,
"id_str": "201101250740240387",
"indices": [
34,
54
],
"media_url": "http:\/\/p.twimg.com\/Asp0haZCQAMC-Sq.jpg",
"media_url_https": "https:\/\/p.twimg.com\/Asp0haZCQAMC-Sq.jpg",
"url": "http:\/\/t.co\/1EXkTMYq",
"display_url": "pic.twitter.com\/1EXkTMYq",
"expanded_url": "http:\/\/twitter.com\/crifor\/status\/201101250740240384\/photo\/1",
"type": "photo",
"sizes": {
"small": {
"w": 340,
"h": 455,
"resize": "fit"
},
"large": {
"w": 765,
"h": 1024,
"resize": "fit"
},
"thumb": {
"w": 150,
"h": 150,
"resize": "crop"
},
"orig": {
"w": 765,
"h": 1024,
"resize": "fit"
},
"medium": {
"w": 600,
"h": 803,
"resize": "fit"
}
}
}
]
},
"from_user": "stevoltan",
"from_user_id": 165713968,
"from_user_id_str": "165713968",
"from_user_name": "Stefano Voltan",
"geo": null,
"id": 201116057396719616,
"id_str": "201116057396719616",
"iso_language_code": "en",
"metadata": {
"result_type": "recent"
},
"profile_image_url": "http:\/\/a0.twimg.com\/profile_images\/2163464409\/crepes_normal.jpg",
"profile_image_url_https": "https:\/\/si0.twimg.com\/profile_images\/2163464409\/crepes_normal.jpg",
"source": "<a href="http:\/\/twitter.com\/#!\/download\/iphone" rel="nofollow">Twitter for iPhone<\/a>",
"text": "RT #crifor: #wearetwo belle facce http:\/\/t.co\/1EXkTMYq",
"to_user": null,
"to_user_id": 0,
"to_user_id_str": "0",
"to_user_name": null
},
I need to extract the media url and text... can someone please help me.. i'm really new to this... i'd appreciate if you could show me a working example of this..at least the function...

This documentation will show you how to get the data into a format you can work with using jQuery:
http://api.jquery.com/jQuery.getJSON/
Something like:
$.getJSON('http://search.twitter.com/search.json?q=wearetwo&lang=en&result_type=recent&rpp=100&include_entities=true', function(data) {
var media_url = data.results.media.media_url;
var text = data.text;
});