Extracting information from a Go template within an AngularJS environment

Question

Extracting information from a Go template within an AngularJS environment

I am brand new to Angular Js. I successfully retrieved data from golang in angular js. However, when I use it in an alert box, it displays as [object Object]. I attempted to fix this issue by changing the delimiters of golang from {{ }} to <<< >>>, but unfortunately, the problem persisted.

Here is my Go code (I am using beego):

func (receiver *AdsController) LoadNewCampaignPage()  {
    view := viewmodels.NewCampaignPageViewModel{}
    view.Title = "New Campaign"
    receiver.Data["vm"] = view
    receiver.Layout = "layouts/ads_header.html"
    receiver.TplName = "templates/ads_add_campaign.html"
}

The struct viewmodels.NewCampaignPageViewModel{}:

type NewCampaignPageViewModel struct {
    Title           string
    ProfileName     string
    ProfilePicture  string
    UnUsedBoxes     []models.Box
    ErrorMessage    string
}

HTML:

<div ng-controller="AddBoxForAdsCtrl">
    <button class="_button _button-3" ng-click="showHiddenForm()">Add Box</button>
</div>

JavaScript:

var addBoxForAds = angular.module('addBoxForAds', []);
addBoxForAds.controller('AddBoxForAdsCtrl', function ($scope, $http){
     var title = $http.get('<<<.vm.Title>>>'); //Data from GO; delimiters have been changed.
     alert(title);
});

What mistakes have I made here? How can I effectively retrieve data from golang in angularjs? And how do I utilize the struct element UnUsedBoxes (which is an array of structs)?

javascript angularjs go beego

Answer 1

Answer №1

$http.get is used to send a get request to the server in order to retrieve JSON data, and you are simply passing the value directly to the JavaScript code. If I understand correctly, you will need to update your code like this:

var title = '<<<.vm.Title>>>';

Alternatively, you could create a function in Go similar to this example (which may vary on the Beego framework):

import (
    "net/http"
    "encoding/json"
)

func main() {
    http.HandleFunc("/title", title_handler)
    http.ListenAndServe(":8000", nil)
}

func title_handler(w http.ResponseWriter, r *http.Request) {
    title := map[string]string{"title": "My Title"}
    // This should also work:
    // title := struct {title string} {"My Title"}

    json_title, _ := json.Marshal(title)
    w.Header().Set("Content-Type", "application/json")
    w.Write(json_title)
}

In your JavaScript code:

var title = $http.get('/title');

Answer 2

$http.get is used to send a get request to the server in order to retrieve JSON data, and you are simply passing the value directly to the JavaScript code. If I understand correctly, you will need to update your code like this:

var title = '<<<.vm.Title>>>';

Alternatively, you could create a function in Go similar to this example (which may vary on the Beego framework):

import (
    "net/http"
    "encoding/json"
)

func main() {
    http.HandleFunc("/title", title_handler)
    http.ListenAndServe(":8000", nil)
}

func title_handler(w http.ResponseWriter, r *http.Request) {
    title := map[string]string{"title": "My Title"}
    // This should also work:
    // title := struct {title string} {"My Title"}

    json_title, _ := json.Marshal(title)
    w.Header().Set("Content-Type", "application/json")
    w.Write(json_title)
}

In your JavaScript code:

var title = $http.get('/title');

Extracting information from a Go template within an AngularJS environment

Answer №1

Similar questions

Numerous scripts available for achieving a responsive layout using (window).resize event

Separate and add on the change validity status of an AngularJS form

Utilizing React's useState with array.map for handling multiple elements

Creating a spacious text box for an enhanced Ajax search feature

What are some strategies for bypassing the restrictions on Cross Origin Requests?

The shopping cart in our e-commerce website is refreshed in real-time thanks to the integration of J

Trouble activating header checkbox on initial click

Having trouble integrating VueX store and router into Mocha tests

Using AngularJs ngBind may cause syntax highlighted code snippets to not display properly

JavaScript function implemented to add query parameters to HTTP requests

I am looking to modify the JSON format of the API response

What are the potential issues with my validation function specifically designed for the select element?

How can I pass arguments from a Python command line program (compiled to an EXE) to a JavaScript file?

Nuxt middleware failing to verify user's logged-in status

ReactJs throws an error of "Uncaught SyntaxError: Unexpected token '<' while utilizing the map() function in ReactJs that produces JSX (specifically MaterialUi-icons) within an array

Getting the user's name and country using `auth().createUserWithEmailAndPassword` is a simple process

Issue with React.useEffect not functioning in Express application

Master the art of positioning in three.js framework

The most effective method for transferring asynchronous data to pages in Next.js

Ways to automatically check a checkbox using jQuery