There is no "right" answer here.
The advantages of using meta data on the HTML objects are:
- The data can be maintained by a non-developer by simply modifying the attributes on the HTML.
- Items can be added, removed or edited by a non-developer just by changing the HTML.
- An individual movie item is self describing all in one place. You don't have to double maintain both HTML and corresponding code.
The advantages to using a pre-built javascript object are:
- Potentially Faster performance (though it is unclear if the performance difference here would be noticable).
- Modifying data from javascript code might be simpler in a javascript object.
I don't know what exactly you've heard about "storing and changing information in the DOM is inefficient". It really depends entirely upon what you're doing and what type of data you're changing and how much the performance matters in any way. It is absolutely slow to modify the DOM in such a way that causes a relayout and repaint. But, reading a piece of meta data off an HTML object in the DOM does not cause a relayout or repaint.
If you had a tight loop that was extremely performance sensitive, then you should probably use data in javascript objects, not attributes on DOM objects. But, the performance of reading a DOM attribute is usually not a noticeable issue so issues like readability and maintainability are often more important and would drive the decision.
P.S. You aren't using the term JSON appropriately. What I think you're asking about is a "Javascript object" or "Javascript literal" which is how you statically declare javascript variables in your javascript code. JSON is a text format for specifying or interchanging javascript data in pure string format. JSON must be parsed to turn it into actual javascript variables.