We Keep Coding

How to pick an specific object then push it into an existing array?

api.get(`get-participant-reports/${this.userData.ind_id}`)
.then((res) => {
this.reportData = res.data;
for (var i = 0; i < this.reportData.length; i++) {
api.get(`get-not-eligible360/${this.reportData[i].id}`).then((res) => {
this.reportData.push(res.data)
console.log(this.reportData)
});
}
});
I have 2 api that I want to populate the same variable so I use .push() to insert the 2nd API call to the same variable.
This is what it looks like:
0:{
"id": 30,
"survey_template_name": "Big 5 Survey",
"report_template_name": "5 Step Profile Report",
"suborg_name": "Sandbox",
"program_name": "MNET Testing",
"iteration_name": "MNET2022 - Test July 2022",
}
1:{
"id": 3280,
"survey_template_name": "Big 5 Survey",
"report_template_name": "5 Step Profile Report",
"suborg_name": "Sandbox",
"program_name": "MNET Testing",
"iteration_name": "iteration-1a",
}
2:{
"0": {
"id": 30,
"not_eligible": "1",
}
}
3:{
"0": {
"id": 3280,
"not_eligible": "1",
}
}
What I want to happen is to get the not_eligible then push it into the existing variable that has the same id respectively. How can I do that?

I'm assuming that you have response data as array of object for both and need to add key not_eligible in first response data based on id of first response data so i have update code it should work for you.
api.get(`get-participant-reports/${this.userData.ind_id}`)
.then((res) => {
this.reportData = res.data;
for (var i = 0; i < this.reportData.length; i++) {
api.get(`get-not-eligible360/${this.reportData[i].id}`).then((res) => {
this.reportData.forEach(reportItem => {
const existData = res.data.find(resItem => resItem.id === reportItem.id);
if (existData) {
reportItem.not_eligible = existData.not_eligible
}
});
console.log(this.reportData)
});
}
});

Try with findIndex and if found set object property:
api.get(`get-participant-reports/${this.userData.ind_id}`)
.then((res) => {
this.reportData = res.data;
for (var i = 0; i < this.reportData.length; i++) {
api.get(`get-not-eligible360/${this.reportData[i].id}`).then((res) => {
let idx = this.reportData.findIndex(i => i.id == res['0'].id)
if(idx > -1) this.reportData[idx].not_eligible = res['0'].not_eligible
});
}
});

Could not parse the remainder: '${profiles['user']}' from '${profiles['user']}

const data = '{{ search_user }}'
const rdata = JSON.parse(data.replace(/"/g, '"'))
const input = document.getElementById('user-input_products')
let filteredArr = []
input.addEventListener('keyup', (e)=>{
box.innerHTML = ""
filterMax = (fn, c) => x => c && fn(x) && c--
filter = profiles=> profiles['full_name'].includes(e.target.value)
max = 30
filteredArr = rdata.filter(filterMax(filter, max))
if (filteredArr.length > 0) {
filteredArr.map(profiles=>{
box.innerHTML += `<li>${profiles['full_name']}</li>`
})
} else {
box.innerHTML = "No result found"
}
})
And when i want to pass id to django url inside of innerHTML it's give me this error:
Could not parse the remainder: '${profiles["user"]}' from '${profiles["user"]}'
How can i fix that?
rdata:
[
{
"user": 28,
"full_name": "John"
},
{
"user": 35,
"full_name": "Robert"
},
{
"user": 37,
"full_name": "Mary"
},
{
"user": 38,
"full_name": "Jennifer"
},
]

You cannot mix server side Python code with frontend javascript code like this. Django Templates sees ${profiles['user']} as a simple string. To fix this you can store a path prefix in a JS variable and combine the user links with JS template literal:
const path_prefix = "{% url 'user_num' %}"
const data = '{{ search_user }}'
const rdata = JSON.parse(data.replace(/"/g, '"'))
const input = document.getElementById('user-input_products')
let filteredArr = []
input.addEventListener('keyup', (e)=>{
box.innerHTML = ""
filterMax = (fn, c) => x => c && fn(x) && c--
filter = profiles=> profiles['full_name'].includes(e.target.value)
max = 30
filteredArr = rdata.filter(filterMax(filter, max))
if (filteredArr.length > 0) {
filteredArr.map(profiles=>{
box.innerHTML += `<li>${profiles['full_name']}</li>`
})
} else {
box.innerHTML = "No result found"
}
})
If the path for the user_num view function is user_num/, then ${path_prefix}${profiles['user']} will produce e.g. user_num/28. You may have to create a new URL definition if user_num function requires an argument, or you can just put in the actual path directly, e.g.: user_num/${profiles['user']}.

how to get data inside json object inside object?

i try to get some track_list data inside object JSON using Musixmatch API
here is my code
"body": {
"track_list": [
{
"track": {
"track_id": 194169151,
"track_name": "Blinding Lights",
"track_name_translation_list": [],
"track_rating": 100,
"commontrack_id": 104185748,
"instrumental": 0,
"explicit": 0,
"has_lyrics": 1,
"has_subtitles": 1,
"has_richsync": 1,
"num_favourite": 3237,
"album_id": 37216011,
"album_name": "After Hours",
"artist_id": 13937035,
"artist_name": "The Weeknd",
"track_share_url": "https://www.musixmatch.com/lyrics/The-Weeknd-3/Blinding-Lights?utm_source=application&utm_campaign=api&utm_medium=rickyreza%3A1409619798940",
"track_edit_url": "https://www.musixmatch.com/lyrics/The-Weeknd-3/Blinding-Lights/edit?utm_source=application&utm_campaign=api&utm_medium=rickyreza%3A1409619798940",
"restricted": 0,
"updated_time": "2020-04-10T08:31:57Z",
"primary_genres": {
"music_genre_list": [
{
"music_genre": {
"music_genre_id": 7,
"music_genre_parent_id": 34,
"music_genre_name": "Electronic",
"music_genre_name_extended": "Electronic",
"music_genre_vanity": "Electronic"
}
}
]
}
}
},
i just want to check if i can geat the data inside a track by doing lyric.album_name. and tried to get the album and i got this kind of things album_name as undefined. here is my main.js
main.js
function main() {
// initialize the data
const baseUrl = "https://api.musixmatch.com/ws/1.1";
const apiKey = "78fa4727ab9c4495d4fc07dae75f775b";
const chartTrack = "chart.tracks.get?chart_name=top&page=1&page_size=5&country=jp&f_has_lyrics=1"
const getLirik = () => {
fetch(`${baseUrl}/${chartTrack}&apikey=${apiKey}`)
.then(response => {
return response.json();
})
.then(responseJson => {
// console.log(responseJson);
// trackList.track_list = responseJson.message.body.track_list
console.log(responseJson.message.body.track_list.track);
// console.log(responseJson.message.body.track_list.track.album_name);
renderAllData(responseJson.message.body.track_list);
})
.catch(error => {
console.log(error);
})
}
/*
for making a new html DOM
*/
const renderAllData = (lyrics) => {
const lirikElement = document.querySelector("#popularLyrics");
lirikElement.innerHTML = "";
lyrics.forEach(lyric => {
lirikElement.innerHTML += `
<div>${lyric.album_name}</div>
`
})
}
getLirik();
}
export default main;
How do i can get all thos track_name and stuff inside track?

You forgot the property .track in your lyrics object. Try this
...
<div>${lyric.track.album_name}</div>

i checked the api call https://api.musixmatch.com/ws/1.1/chart.tracks.get?chart_name=top&page=1&page_size=5&country=jp&f_has_lyrics=1&apikey=78fa4727ab9c4495d4fc07dae75f775b the tracklist returns an Array of objects, where each object has only one key track
something like this track_list = [{track:{}},{track:{}}]
use ${lyric.track.album_name} it should work

you forgot one property, but you can do less nesting using destructuring in the function, this is a litle modification of your code:
const renderAllData = (trackList) => {
const lirikElement = document.querySelector("#popularLyrics");
lirikElement.innerHTML = "";
trackList.forEach(({ track }) => {
lirikElement.innerHTML += `
<div>${track.album_name}</div>
`;
});
};
renderAllData(data.body.track_list);

how to remove JSON header from the object array

I have data in this format. This is gamesparks data that is BaaS using for game development.
I am sending this data to the IOS person but he said he can not fetch this type of data so he told me to change the data
This is my actual data
{
"Details": [{
"5d4c2c28dcf224127a30457b": {
"displayName": "ewqeqw"
},
"5d4c4699dcf224127a3045e0": {
"displayName": "mmmmmmmmmm"
}
}]
}
and I need to change data in this format
{
"Details": [{
"ID": "5d499b0fdcf224127a303d61",
"displayName": "qweqewq"
},
{
"ID": "5d499b0fdcf224127a303d61",
"displayName": "qweqewq"
}
]
}
This is my code:
var group = Spark.getData().group;
var API = Spark.getGameDataService();
var all1 = new Array();
var entry = API.getItem("playerFriends", Spark.getPlayer().getPlayerId());
var friendsList = {};
if (entry.error()) {
Spark.setScriptError("ERROR", error);
Spark.exit();
} else {
var data = entry.document().getData();
if (group === "all") {
for (var friendOBJ in data) {
//Set details of player ID and display name in new friendsList
object
friendsList[friendOBJ] = {};
friendsList[friendOBJ].displayName = data[friendOBJ].displayName;
friendsList[friendOBJ].playerId = data[friendOBJ].playerId;
}
all1.push(friendsList);
} else {
for (var friendOBJ in data) {
if (data[friendOBJ].group === group && data[friendOBJ].status ===
"accepted") {
friendsList[friendOBJ] = {};
friendsList[friendOBJ].displayName = data[friendOBJ].displayName;
}
}
}
Spark.setScriptData("Details", all1);

Can you not just make a function to convert the data into the desired shape? Something like this should work:
function formatData(details) {
var formattedDetails = [];
for (var id in details) {
formattedDetails.push({
ID: id,
displayName: details[id].displayName
});
}
return formattedDetails;
}
var data = {
"Details": [
{
"5d4c2c28dcf224127a30457b": {
"displayName": "ewqeqw"
},
"5d4c4699dcf224127a3045e0": {
"displayName": "mmmmmmmmmm"
}
}
]
};
var formattedData = formatData(data.Details[0])

this is the output you want
{
"Details": [{
"ID": "5d499b0fdcf224127a303d61",
"displayName": "qweqewq"
}
}
and this is my code i am explaining each line with comment
var count = 0;
var tmp = { AcceptedFriendList: []}; //make object and inside empty array
for (var friendOBJ in data) { // retrieving data
if(data[friendOBJ].status === "accepted"){ // your condition
var tempObj = {"displayName" :"","playerid": ""}; //this is format you want
tempObj.displayName = data[friendOBJ].displayName; // putting data in spicify format object
tempObj.playerid = data[friendOBJ].ID;
tmp.AcceptedFriendList[count] = tempObj; //assign object back to array
count++; // iterate it so the next data come further.
}}

Two sorting / filtering methods used at the same time Javascript

I have two methods - sort and more_than, Here is my JS:
const originalData = [{
"id": 2,
"title": "ASD",
"number": 50,
"src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
},
{
"id": 1,
"title": "FGH",
"number": 150,
"src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
}
]
const data = [...originalData]
const info_container = document.querySelector('.info-container')
const sort = () => {
const newData = data.sort((a, b) => parseFloat(a.id) - parseFloat(b.id))
fetchData(newData)
}
const more_than = (e) => {
if (e) {
const newData = data.filter((a) => {
return parseFloat(a.number) > parseFloat(e)
})
fetchData(newData)
} else return
}
const clear_filters = () => {
const radio = document.querySelector('input[name="sort"]')
radio.checked = false
fetchData(originalData)
}
const fetchData = (data) => {
info_container.innerHTML = "";
data.forEach((item, index) => {
const img = document.createElement("img");
const title = document.createElement('h3')
const node = document.createTextNode(item.src);
const node_title = document.createTextNode(item.title)
title.appendChild(node_title)
img.src = item.src
info_container.appendChild(title)
info_container.appendChild(img);
})
}
window.onload = function() {
fetchData(originalData)
}
<div><input type="radio" name="sort" onclick="sort()" />sort</div>
<div>More <input min="1" max="1000" oninput="more_than(value)" type="number" name="pages" /> than</div>
<div><button onclick="clear_filters()">Clear</button></div>
<div class="info-container">
</div>
plunker: http://plnkr.co/edit/HFuL37jL9ZHbvI2lib6t?p=preview
I want to use them in the same time. Now my sort function disappears after more_than and vice versa. How to fix that?
Thanks for answers in advance!

You want to have a kind of "meta" instance which allows you to keep the application state intact. That means, you need a way to keep the user selection stored inside variables. In the example below, Store acts as a repository for your data which also knows how many "pages" should be displayed as well as if the data should be sorted by .id. Calling .getItems() returns you a list of sorted/unsorted values, optionally filtered by "pages". Please note that Store doesn't alter the original data. It instead returns a new copy of the original data every time you call .getItems().
const originalData = [{
"id": 2,
"title": "ASD",
"number": 50,
"src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
},
{
"id": 1,
"title": "FGH",
"number": 150,
"src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
}
]
const Store = data => {
let __sorted = false;
let __pages = 0;
const _Store = {
sorted() {
__sorted = true;
return _Store;
},
unsorted() {
__sorted = false;
return _Store;
},
setPages(num) {
if (typeof num === 'number' && !isNaN(num)) {
__pages = Math.abs(num); // ensure we have a positive number
}
return _Store;
},
unsetPages() {
__pages = 0; // revert back to default
return _Store;
},
getItems() {
let items = [...data];
if (__sorted) {
return __pages <= 0 ? items.sort((a, b) => Number(a.id) - Number(b.id)) :
/* else */ items.filter(a => Number(a.number) >= __pages).
sort((a, b) => Number(a.id) - Number(b.id))
}
return __pages <= 0 ? items :
/* else */ items.filter(a => Number(a.number) >= __pages);
}
};
return _Store;
};
const dataStore = Store(originalData);
const $checkSort = document.querySelector('input[name="sort"]');
const $inputPages = document.querySelector('input[name="pages"]');
const $resetFilters = document.querySelector('#filter-reset');
const $output = document.querySelector('.info-container')
function onCheckSorted (event) {
if (event.target.checked) {
dataStore.sorted();
} else {
dataStore.unsorted();
}
show();
}
function onChangePages (event) {
let v = Number(event.target.value.trim());
if (v && !isNaN(v)) {
dataStore.setPages(v);
} else {
dataStore.unsetPages();
}
show();
}
function onClickReset () {
$checkSort.checked = null; // update UI
$inputPages.value = null; // update UI
dataStore.unsetPages().unsorted();
show();
}
function show () {
$output.innerHTML = "";
dataStore.getItems().forEach((item, index) => {
const img = document.createElement("img");
const title = document.createElement('h3')
const node = document.createTextNode(item.src);
const node_title = document.createTextNode(item.title)
title.appendChild(node_title)
img.src = item.src
$output.appendChild(title)
$output.appendChild(img);
});
}
$checkSort.addEventListener('change', onCheckSorted);
$inputPages.addEventListener('input', onChangePages);
$resetFilters.addEventListener('click', onClickReset);
// kick off
show();
<div><input type="checkbox" name="sort" />sort</div>
<div>More <input min="1" max="1000" type="number" name="pages" /> than</div>
<div><button id="filter-reset">Clear</button></div>
<div class="info-container">
</div>