My data looks like this
data = [
{
"id": "27eb95f9",
"title": "hello",
"sort": 4
},
{
"id": "367da510",
"title": "bro",
"sup-title": "",
"sort": 2
},
{
"id": "27eb95f9",
"title": "how ",
"sort": 3
},
{
"id": "367da510",
"title": "you doing",
"sup-title": "",
"sort": 1
},
Now I want to use map funtion in React to show 'title' but I want the order to be according to "sort" in the object file. How can I do that ?
First use sort function, then map it! Please see below.
In the second exapmle you can use it to render your componenet as well.
Here can you read about sort method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
const data = [
{
"id": "27eb95f9",
"title": "hello",
"sort": 4
},
{
"id": "367da510",
"title": "bro",
"sup-title": "",
"sort": 2
},
{
"id": "27eb95f9",
"title": "how ",
"sort": 3
},
{
"id": "367da510",
"title": "you doing",
"sup-title": "",
"sort": 1
}];
const sortedTitles = data.sort((d1, d2)=>d1-d2).map((d)=>d.title);
console.table(sortedTitles);
render = data.sort((d1, d2)=>d1-d2).map((d)=>`<p>${d.title}</p>`).join("");
console.log(render);
document.getElementById("app").innerHTML = render
<div id="app"></div>
it may works, first JSON.parse(data) to have it as a object then
data.map(row => return {
...row, order : row.sort
})
Related
I'm working with vue-draggable for creating a navigation menu. The result array could have N deep levels.
I want to remove an object by it's id.
The array looks like:
[
{
"id": 1,
"name": "Viedma",
"slug": "viedma",
"children": []
},
{
"id": 6,
"name": "Cultura",
"slug": "Cultura",
"children": [
{
"id": 2,
"name": "Rio Negro",
"slug": "rio-negro",
"children": [
{
"id": 4,
"name": "Edictos",
"slug": "edictos",
"children": []
},
{
"id": 5,
"name": "Deportes",
"slug": "deportes",
"children": []
}
]
}
]
},
{
"id": 3,
"name": "Policiales",
"slug": "policiales",
"children": []
}
]
I've tried the solution from remove object from nested array but since I have an array instead of a main object it doesn't work.
Please note that I'm using vue 3 with composition API.
This is what I have so far. The remove() method is called from UI
setup(props, context) {
const resources = ref(props.data)
const removeFromTree = (parent, childNameToRemove) => {
parent.children = parent.children
.filter(function(child){ return child.name !== childNameToRemove})
.map(function(child){ return removeFromTree(child, childNameToRemove)})
return parent
}
const remove = (element) => {
var tree = [...resources.value]
resources.value = removeFromTree(tree, element.name)
}
return {
resources,
remove
}
}
BTW, If parent is removed, all it's children should be removed too.
Your function takes parent as an object but you passing tree as an array. You can do like this
function removeItemByName(items, itemName) {
return items.filter(item => item.name !== itemName)
.map(item => {
item.children = removeItemByName(item.children, itemName)
return item
})
}
const input = [
{
"id": 1,
"name": "Viedma",
"slug": "viedma",
"children": []
},
{
"id": 6,
"name": "Cultura",
"slug": "Cultura",
"children": [
{
"id": 2,
"name": "Rio Negro",
"slug": "rio-negro",
"children": [
{
"id": 4,
"name": "Edictos",
"slug": "edictos",
"children": []
},
{
"id": 5,
"name": "Deportes",
"slug": "deportes",
"children": []
}
]
}
]
},
{
"id": 3,
"name": "Policiales",
"slug": "policiales",
"children": []
}
]
console.log(removeItemByName(input, 'Policiales'))
console.log(removeItemByName(input, 'Deportes'))
Below is an object of an object. How do i convert the keys to use the id instead as the keys?
const data = {
"0": {
"id": 1912,
"title": "Books",
},
"1": {
"id": 1958,
"title": "Brands",
},
"2": {
"id": 2037,
"title": "Logo",
},
"3": {
"id": 2038,
"title": "Colour",
},
}
How do i replace the keys to use the id instead such as below?
const data = {
"1912": {
"id": 1912,
"title": "Banana",
},
"1958": {
"id": 1958,
"title": "Apple",
},
"2037": {
"id": 2037,
"title": "Orange",
},
"2038": {
"id": 2038,
"title": "Pineapple",
},
}
How about this?
We loop through the keys of the original object and access each of the ids through the object by data[x].id. Now, instead of explicitly grabbing the id like we did when we wanted to set the key, we just need to grab the remaining values by accessing data[x].
let newObj = {}
Object.keys(data).map(x => {
newObj[data[x].id] = data[x]
})
console.log(newObj)
By the way, just for reference, you have different title values in the second Object but I am assuming that was a mistake.
This is a pretty basic, non fancy way of doing it:
<html>
</html>
<script>
const data = {
"0": {
"id": 1912,
"title": "Books",
},
"1": {
"id": 1958,
"title": "Brands",
},
"2": {
"id": 2037,
"title": "Logo",
},
"3": {
"id": 2038,
"title": "Colour",
},
}
console.log("before: ", data)
let data1 = []
for (var k in data) {
var d = data[k];
data[k]
data1[d.id] = d
console.log(d)
console.log(data1)
}
</script>
Having said that... you will end up with alot of empty objects in your array between those numbers!
Create an array from values of data and reduce it into a single object.
const data = {
"0": {
"id": 1912,
"title": "Books",
},
"1": {
"id": 1958,
"title": "Brands",
},
"2": {
"id": 2037,
"title": "Logo",
},
"3": {
"id": 2038,
"title": "Colour",
},
}
const result = Object.values(data).reduce((acc,curr)=>{
acc[curr.id] = curr
return acc
},{})
console.log(result)
I have a dimensional array like this
{
"items": [
{
"id": "file",
"value": "File",
"childs": [
{
"value": "New",
"status": 1
},
{
"value": "New",
"status": 2
},
{
"value": "New",
"status": 1
}
]
},
{
"id": "file",
"value": "File",
"childs": [
{
"value": "New",
"status": 1
},
{
"value": "New",
"status": 2
},
{
"value": "New",
"status": 1
}
]
}
]
}
How to filter items and own childs by childs.status
You have to use filter method in order to filter your array of items based on specific test, in your case when status 3 has been found, Here is a working example:
var json = {
"items": [
{
"id": "file",
"value": "File",
"childs": [
{
"value": "New",
"status": 1
},
{
"value": "New",
"status": 2
},
{
"value": "New",
"status": 1
}
]
},
{
"id": "file",
"value": "File",
"childs": [
{
"value": "New",
"status": 1
},
{
"value": "New",
"status": 3
},
{
"value": "New",
"status": 1
}
]
}
]
};
var result = json.items.filter(function(item) {
item.childs = item.childs.filter( function (child) {
return child.status === 3;
});
return item.childs.length > 0;
});
console.log({items: result});
I've setup a repl in which i've drawn out the method to filter your json. You can find it here; feel free to play around with it.
#younel's answer mutates the original array, I've also updated my repl with his approach to show how the original json is mutated.
Essence
look through each item in items
if a child in item matches the filter criteria, then keep the item and the filtered children
I have a problem pointing dataTable to the right spot in the JSON. I receive a nested array:
{
"status": "ok",
"count": "7",
"msg ": "Operation Successful",
"data": [{
"contactHasServiceArea": true,
"issueCategories": [{
"id": "8",
"description": "Finance"
},
{
"id": "9",
"description": "Housing"
},
{
"id": "10",
"description": "International"
}
],
"cases": [{
"id": 31645,
"client_name": "Matthew",
"issue": "Assessment Completion",
"referral": null,
"opened_date": "10\/07\/2017",
"case_status": "Open"
}, {
"id": 31668,
"client_name": "Fanky ",
"issue": "Complex",
"referral": null,
"opened_date": "01\/07\/2017",
"case_status": "Open"
}]
}]
}
How do I point to the "cases" object? I'm sure this is simply, but I'm confused by the many options in the dataTables config.
I tried variations of data, dataSrc as well as data.cases or just cases, etc.
Thanks
$('#cases_table').DataTable( {
"ajax": "ajax/getCases",
"dataSrc" : "data.cases",
"data" : "cases",
"columns": [
{ "data": "client_name" },
{ "data": "issue" },
{ "data": "referral" },
{ "data": "opened_date" },
{ "data": "case_status" }
]
} );
You can configure like this:
$('#cases_table').DataTable( {
"ajax": {
"url": "ajax/getCases",
"dataSrc" : "data.cases"
},
"columns": [
{ "data": "client_name" },
{ "data": "issue" },
{ "data": "referral" },
{ "data": "opened_date" },
{ "data": "case_status" }
]
} );
datasrc points into the returns json. Remove the data option.
I have a mongo collection called settings
{
"_id": "123",
"type": "subject",
"name": "Main",
"list": [{
"_id": "123",
"name": "Maths"
}, {
"_id": "123",
"name": " Physics"
}]
}
{
"_id": "123",
"type": "exam",
"name": "Activities",
"list": [{
"_id": "123",
"name": "Reading"
}, {
"_id": "123",
"name": "Fluency"
}]
}
Note: the values provided in my mongo is only for reference purpose.
Now I have generated an array with the records in settings collection
self.sample = function() {
self.settingsObj = {}
// console.log(self.settings)
_.each(self.settings, function(settings) {
//_.each(self.settings, function(settings) {
if (!self.settingsObj[settings.type]) {
self.settingsObj[settings.type] = []
}
self.settingsObj[settings.type] = settings.list
})
console.log(self.settingsObj)
}
When I console the settingsObj I get result like this in my console
Object {subject: Array[2], exam: Array[2]}
Now I want to loop this inside a scope variable
$scope.search = [{
"name": "",
"data": ""
}]
inside this name i want to get the object name in this situation subject,exam and inside loop i want to loop the arrays for subject and exam.
I tried another ._each, and I got the key and value but how can I loop them correctly.
Otherwise please help me in generating subject and exams as different array
I'm not very sure if I understand your question.
But if I see well you're using a Lodash.js library so I provide below script using a lodash:
I assume that you have settings variable like this:
var settings = [ {
"_id": "123",
"type": "subject",
"name": "Main",
"list": [{
"_id": "123",
"name": "Maths"
}, {
"_id": "123",
"name": " Physics"
}]
}
,
{
"_id": "123",
"type": "exam",
"name": "Activities",
"list": [{
"_id": "123",
"name": "Reading"
}, {
"_id": "123",
"name": "Fluency"
}]
}];
And I create functions for process those settings:
function createSearch(settings){
return _(settings).flatMap(toSearchArray).value();
}
function toSearchArray(setting){
return _(setting.list).map("name").map(toSearchObject).value()
function toSearchObject(data){
return {
name: setting.type,
data: data
}
}
}
And when you call createSearch(settings)
you will receive this result:
[
{
"name": "subject",
"data": "Maths"
},
{
"name": "subject",
"data": " Physics"
},
{
"name": "exam",
"data": "Reading"
},
{
"name": "exam",
"data": "Fluency"
}
]
Hopefully this is what you need.