JackAdams / meteor-editable-text

Drop-in editable text widget for meteor

Home Page:http://editable-text-demo.taonova.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Array of objects

lunarin opened this issue · comments

Hi there,

first of all thank you very much for the great package. However, I am finding it difficult to implementing this in an each loop. Pardon my tardy post but I am not familiar with posting on git.

I am trying to use editable text in an array of objects deep inside of Meteor.user().profile and its structure is as follows:

"details" : [
{
"_id" : "2ewr5C8rzRgamvisH",
"quantity" : 1
},
{
"_id" : "5EMP9S8oeHLxP2rMC",
"quantity" : 1
},
]

html:

{{#each details}}
{{#with currentUser}}
{{> editableText collection="users" field="quantity" context=parent type="number"}}
{{/with}}
{{/each}}

js:

parent:function(){
return Template.parentData();
}

Currently, I am able to display the data correctly. However, it is not 'editing' the value. Do you know what I doing wrong and what can I do?

Thank you very much in advance for reading this.

Hi @lunarin and thank you for the kind words.

This is similar to issue #40 and I created a meteorpad that contains a pattern for dealing with items in nested arrays.

Basically, the idea is that you need a path into the document for field. For example, in your case:

field="profile.details.0.quantity"

The problem is that there's no way of getting the index (0 in the above example) easily, so you have to add it via a helper. The meteorpad example uses this approach.

If you're having trouble adapting the meteorpad example to your own use case, let me know.

Problem accessing the document's nested array (object) fields ...

Let's say my document looks like that:

{
_id: xxx
name: 'Tom'
cars : [
 { make : 'volvo',
   wheels: {
     left: 'ok',
     right:'broken'}
 },
 { make : 'bmw',
   wheels: {
     left: 'flat',
     right:'ok'}
  }
]

Have no problems editing the first level fields like 'name', but have a problem within second level template.
The

{{name}}

is working there, but:

{{> editableText context=WhatstheContextHere?? collection="cars" field="make"}}

is not.

Nor do I have any idea what is the context field, especially as it seems the package expects 'flat' documents.

Is there any way to access the second/third level array elements using given package??

Okay, in answer to the above question:

(Note: I'm assuming the collection your documents are coming from is CarOwners = new Mongo.Collection('carOwners'). The different casing of CarOwners and carOwners is deliberate for demonstration purposes and is applied consistently below in the example, so take careful note of that.)

In the template:

{{#each owners}}
  <h1>{{name}}</h1>
  Cars:
  <br>
  {{#each cars}}
    Make: {{> editableText context=.. collection="carOwners" field=fieldFromHelper}}
    <br>
  {{/each}}
{{/each}}

(Note: the context always needs to be the whole document, hence the .. to go up a context level)

In the helper js file:

Template.carOwnerList.helpers({
  owners: function () {
    return CarOwners.find();
  },
  cars: function () {
    return _.map(this.cars, function (car, index) {
      return _.extend(car, {index: index});
    });
  },
  fieldFromHelper: function () {
     return 'cars.' + this.index + '.make';
  }
});

I just wrote that out of my head, so it may have some mistakes, but that's the general gist of it.

commented

Thanks again, will give it a try.

My Users collection is

{
	"_id" : "inCmjZM3QAThunkBK",
	"createdAt" : ISODate("2017-06-14T05:48:12.160Z"),
	"services" : {
		"password" : {
			"bcrypt" : "$2a$10$/o2M4fSVxGbQq.g8YqotSuZ49fdZ5Mw2TSxSzPCDEAqc0BU3YhWFG"
		},
		"resume" : {
			"loginTokens" : [
				{
					"when" : ISODate("2017-06-14T07:03:58.297Z"),
					"hashedToken" : "eGBIL6EIue7dl9kLj00Gg6khN6JXFoln7AAaVVvWf6E="
				},
							]
		}
	},
	"username" : "salim@deligence.com",
	"profile" : {
		"firstname" : "salim"
	},
	"status" : "Success"
}

I want to access profile.firstname and using the following codes

{{> editableText collection="users" field="profile.firstname"}}

But the above code is not working

That should work, provided the user document is the context. What is happening in the browser console?

{{#with currentUser}}
  {{> editableText collection="users" field="profile.firstname"}}
{{/with}}

How can I use this package babrahams:editable-text Meteor with ReactJS

It's all Blaze, so you'd need to wrap the Blaze in a React component. Not really made for React.